用于 Windows8 的 Wijmo Charts 图表控件

随着Windows 8 Developer Preview 和 Visual Studio 11 Preview的发布, 大家对Metro-style的关注也逐步升温。最大的改变就是我们可以用HTML、JavaScript以及CSS进行Windows 应用程序的开发了。这应该是所有的Web Developer的福利了。

众所周知,Wijmo 是一套JavaScript UI 类库。我打算试着把它放到Windows 8里,准确的说,我尝试利用Wijmo的Charts实现一个Windows 8下的Metro UI 应用程序。于是,我是就按照下面的步骤开始了:

File –> New Project

图1:JavaScript Project Templates in Visual Studio

当我看到Visual Studio Project Template中出现了JavaScript分类时非常兴奋。我使用了Navigation Application。

Default Project Template

图2:Default Project Template for Win8 App

当我打开project,这些都是VS自动加载的。如果你跟我一样是个Web Developer,那么这些东西肯定在熟悉不过了,HTML,CSS还有JavaScript文件。

添加 Wijmo Charts

我需要使用Wijmo Charts图表控件,所以我需要添加必要的引用。主要是jQuery,jQuery UI, Raphael 和 Wijmo。 这样一来,有很多不需要的代码也会加进来,我们会在后面将他们剔除出去。现在我们只考虑如何使用的问题以及它是否稳定。

图3:添加Wijmo和jQuery文件到工程

需要注意的是,这些文件都必须打包到应用程序中,所以CDN不可用。

添加Script引用

打开项目中的default.html,你会发现VS已经从Metro UI Framework中添加了一些scripts文件。花了点时间,检查了一下这些文件,都已经半酣在framework中了。如果有兴趣,可以仔细看看,都是标准的JavaScript文件。

default.html中的引用文件如下:

<script src="/js/wijmo/external/jquery-1.6.2.min.js" type="text/javascript">
</script>
<script src="/js/wijmo/external/jquery-ui-1.8.16.custom.min.js" type="text/javascript">
</script><script src="/js/wijmo/external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript">
</script>
<script src="/js/wijmo/external/jquery.mousewheel.min.js" type="text/javascript">
</script>
<script src="/js/wijmo/external/jquery.glob.min.js" type="text/javascript">
</script>
<script src="/js/wijmo/external/raphael.js" type="text/javascript">
</script>
<script src="/js/wijmo/jquery.wijmo-open.1.4.1.min.js" type="text/javascript">
</script>
<script src="/js/wijmo/jquery.wijmo-complete.1.4.1.min.js" type="text/javascript">
</script>

开始实现

现在开始写代码。由于这是一个Navigation Application,他会将各个独立的文件load到default.html中。项目中已经包含了一个页面,在初始化是会被调用。他在“html”文件夹中,叫homePage.html。我们只需要在这个页面中价格div用于render Wijmo Charts图表控件。这将会被作为一个widget在初始化时加载。

<div id="wijpiechart" class=""></div>

js文件夹中有个homePage.js文件用于我们正在工作的homePage.html文件。实际上这相当于HTML页面的“code behind”。js文件中包含一些初始化代码。我们要将我们的代码添加到 .when() 中,这样就可以在homePage.html文件被load的时候调用。下面是整个function的代码。

function fragmentLoad(elements, options) {
        WinJS.UI.processAll(elements)
            .then(function () {
            // TODO: Initialize the fragment here.
            $("#wijpiechart").wijpiechart({
                height: 600,
                width: 1024,
                seriesList: [{
                    label: "c#",
                    data: 215517
                },
                {
                    label: "java",
                    data: 157301
                },
                {
                    label: "php",
                    data: 145929
                }],
                textStyle: { fill: "#ffffff", "font-family": "Segoe UI Semilight", "font-size": "20pt", stroke: "none" },
                chartLabelStyle: { fill: "#242122", "font-family": "Segoe UI Semilight", "font-size": "20pt", stroke: "none" },
                hint: {
                    contentStyle: { "font-family": "Segoe UI Semilight", "font-size": "24pt", stroke: "none" },
                    content: function () {
                        return this.data.label + " : " + $.format(this.value / this.total, "p2");
                    }
                },
                header: {
                    visible: false
                },
                legend: {visible:false},
                seriesStyles: [{
                    fill: "180-rgb(255,15,3)-rgb(212,10,0)", stroke: "#FFFFFF", "stroke-width": "2"
                }, {
                    fill: "90-rgb(255,102,0)-rgb(255,117,25)", stroke: "#FFFFFF", "stroke-width": "2"
                }, {
                    fill: "90-rgb(255,158,1)-rgb(255,177,53)", stroke: "#FFFFFF", "stroke-width": "2"
                }]
            });
        });
    }

我只在seriesList中加入了3条数据,数据也是hard code的,并没有绑定数据源,这只是为了能够更便捷的看到效果。

按下F5,你懂得!一个Metro app就立刻呈现眼前(Hold住!)一个漂亮的SVG Chart(矢量图表)就出现了。如果你跟我一样,也是个Web程序员,那么现在,你已经会创建Windows 8 app了。

参考资源

源码下载

英文链接

ComponentOne Wijmo官网

ComponentOne Studio for ASP.NET Wijmo控件包下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【编程工具】sublime使用技巧

★ 编程工具 ★ Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器...

31980
来自专栏小白课代表

更新 | 给你的Windows加一个 「文件快速预览」功能

13920
来自专栏DeveWork

Option Framework 框架的三个自定义技巧

陆陆续续将解密一些本站几个收费主题的核心功能,分享才会更好。虽然鄙人技术不称得上牛逼,好在足够专注也能学点。Option Framework 框架免费开源,采用...

21950
来自专栏一“技”之长

Xcode多版本的dmg文件下载方式 原

        在iOS开发中,有时我们想保有当前版本的Xcode的同时,体验新版本或者兼容旧版本,在apple官网上,是提供给我们下载地址的:

40820
来自专栏熊二哥

Eclipse常见设置与操作

Eclipse虽然被IDEA超越了,但仍然是最佳的JAVA开发工具哈。因为经常会在不同的开发环境中进行开发,所以对Eclipse常见操作做一个记录,以便于查阅,...

21690
来自专栏施炯的IoT开发专栏

File Transfer over Socket Between Windows Mobile Devices

    在《利用WiFi在Windows Mobile上建立Ad-hoc网络》一文中,讲述了利用WiFi在Windows Mobile上建立Ad-hoc网络的方...

19660
来自专栏逸鹏说道

QT5.8支持中文输入法(附带老版本的解决+不理想的情况解决)

安装过程:http://www.cnblogs.com/dotnetcrazy/p/6725945.html 用了QT发现,中文输入法不能输入。。。一开始以为是...

36160
来自专栏菩提树下的杨过

flex中使用swc实现更好的界面代码分离

前几天写过一篇"flash开发中如何实现界面代码分离",评论中 小-G 同学给出了更好的建议:swc ,今天试用了一下,果然比较embed swf来得更爽!同时...

22160
来自专栏大神带我来搬砖

一步步成为linux大神——bash shell中SIGHUP和SIGTERM信号的处理

新人最容易发生的事情就是用ssh客户端(比如xshell)登录服务器之后,用&在后台执行了命令,第二天兴致勃勃去看任务,发现已经被kill了。一开始我学到的知识...

61880
来自专栏AndroidTraveler

Android 调试之无线连接设备

在用 Mac Pro 开发时,Mac 上面的 USB 插槽就两个,一个接了鼠标,一个接了键盘,然后,然后就没了,那我真机调试时肿么办?

10810

扫码关注云+社区

领取腾讯云代金券