用于 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中的引用文件如下：

1. <script src="/js/wijmo/external/jquery-1.6.2.min.js" type="text/javascript"></script>
   
2. <script src="/js/wijmo/external/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
   
3. <script src="/js/wijmo/external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
   
4. <script src="/js/wijmo/external/jquery.mousewheel.min.js" type="text/javascript"></script>
   
5. <script src="/js/wijmo/external/jquery.glob.min.js" type="text/javascript"></script>
   
6. <script src="/js/wijmo/external/raphael.js" type="text/javascript"></script>
   
7. <script src="/js/wijmo/jquery.wijmo-open.1.4.1.min.js" type="text/javascript"></script>
   
8. <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的代码。

1. function fragmentLoad(elements, options) {
   
2. WinJS.UI.processAll(elements)
   
3. .then(function () {
   
4. // TODO: Initialize the fragment here.
   
5. $("#wijpiechart").wijpiechart({
   
6. height: 600,
   
7. width: 1024,
   
8. seriesList: [{
   
9. label: "c#",
   
10. data: 215517
    
11. },
    
12. {
    
13. label: "java",
    
14. data: 157301
    
15. },
    
16. {
    
17. label: "php",
    
18. data: 145929
    
19. }],
    
20. textStyle: { fill: "#ffffff", "font-family": "Segoe UI Semilight", "font-size": "20pt", stroke: "none" },
    
21. chartLabelStyle: { fill: "#242122", "font-family": "Segoe UI Semilight", "font-size": "20pt", stroke: "none" },
    
22. hint: {
    
23. contentStyle: { "font-family": "Segoe UI Semilight", "font-size": "24pt", stroke: "none" },
    
24. content: function () {
    
25. return this.data.label + " : " + $.format(this.value / this.total, "p2");
    
26. }
    
27. },
    
28. header: {
    
29. visible: false
    
30. },
    
31. legend: {visible:false},
    
32. seriesStyles: [{
    
33. fill: "180-rgb(255,15,3)-rgb(212,10,0)", stroke: "#FFFFFF", "stroke-width": "2"
    
34. }, {
    
35. fill: "90-rgb(255,102,0)-rgb(255,117,25)", stroke: "#FFFFFF", "stroke-width": "2"
    
36. }, {
    
37. fill: "90-rgb(255,158,1)-rgb(255,177,53)", stroke: "#FFFFFF", "stroke-width": "2"
    
38. }]
    
39. });
    
40. });
    
41. }
    

复制代码

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



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



参考资源

源码下载

英文链接

ComponentOne Wijmo官网

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