用于 Windows8 的 Wijmo Charts 图表控件
2019独角兽企业重金招聘Python工程师标准>>>
随着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控件包下载
本文出自 “葡萄城控件博客” 博客,请务必保留此出处http://powertoolsteam.blog.51cto.com/2369428/723678
转载于:https://my.oschina.net/powertoolsteam/blog/278101
用于 Windows8 的 Wijmo Charts 图表控件相关推荐
- 用于金融科技应用开发的高性能图表控件
金钱使世界运转,因此,跟踪和控制金融交易和信息是当今互联世界中任何企业.金融机构或个人最重要的活动之一.为此,你需要金融技术应用. 根据不同的目的,金融技术应用可能有不同的功能,使其符合用户需要.例如 ...
- 可用于wpf的图表控件:WPFTookit Chart
当前项目需要一个图表控件,尝试用过mschart和livechart,都不是很满意.这里试一下WPFToolkit.DataVisualization. 引用dll,通过nuget包管理器下载WPFT ...
- Essential Chart for ASP.NET MVC商业图表控件相关介绍及下载
Essential Chart for ASP.NET MVC是一款功能强大的商业图表控件,提供了创新的数据对象模型可以很容易地与多种数据源进行绑定,提供了35种图表类型,支持2D和3D显示,多轴显示 ...
- 支持Flash和JavaScript的图表控件FusionWidgets
FusionWidgets是一款功能强大的图表控件,同时支持Flash和JavaScript(HTML5),可用于PCs, Macs, iPads, iPhones 等,包含一系列实时仪表和自动更新图 ...
- 属性导出FusionCharts图表控件中文版使用手册
PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! FusionCharts图表控件中文版应用手册 目录 媒介.先谈谈我对fus ...
- Flutter 图表控件使用笔记
Flutter 图表控件使用笔记 最近有图表绘制需要,记录下现有的Flutter主流实现方式 原文链接:https://blog.csdn.net/weixin_44259356/article/de ...
- 微软图表控件MsChart
转自:http://tech.ddvip.com/2008-11/122640479791375.html 昨天在网上看到了微软发布了.NET 3.5框架下的图表控件,第一时间抓下来看了一下,发觉功能 ...
- 跨平台图表控件TeeChart使用教程:导入XML数据
2019独角兽企业重金招聘Python工程师标准>>> TeeChart的最新版中包含了一个自动加载XML数据的新组件.这个组件的名字叫做TTeeXMLSource,用户可以在Tee ...
- labview波形图两个游标,LabVIEW数据可视化:使用波形图表控件逐点显示曲线的方法...
LabVIEW平台中提供了强大的2D/3D数据的可视化控件,如波形图.波形图表.XY图.强度图.数字波形图.混合信号图.二维/三维图片及用于特殊用途的极坐标图.Smith图.雷达图控件等. 上篇文章: ...
最新文章
- (转)VS2005 SP1发布,解决只能创建WebSite,无法创建Web Application项目的问题
- android天女散花效果_Android有趣的爆炸散落动画view:开源ExplosionField
- HDU3939(毕达哥拉斯三元组的解)
- kotlin学习之集合(十三)
- C语言(CED)与long long相关的知识
- topsis综合评价法_DRG如何评价临床医师绩效——以肿瘤科为例
- QQ空间迁移_【山特C3KS_连接ESXI虚拟机】
- 案例:Java多态实现饮料购买咖啡、可乐、矿泉水
- php大量邮件,PHPMailer批量发送邮件的实例代码
- 如何安装.ipa文件
- 绝地求生缺少xinput1_3.dll怎么办?
- 【蓝桥杯】CT107D开发板没有操作的led灯频闪、暗亮问题,蜂鸣器咔咔响
- python 动态for循环的循环范围_Python中for循环的动态范围
- JQuery图片抽奖
- 安全无污染的激活win7(官方)
- 360浏览器html位置,win7系统查看360浏览器收藏夹位置的操作方法
- 如何选择拨号服务器!
- 语言-英语翻译(edx-datascientist 1.2-1.4)
- 面试|应聘Java开发工程师的基本要求是什么?
- 无线测速系统 便利智能交通
热门文章
- 测试开发:提升测试效率都有哪些具体手段?
- 测试人如何高效地设计自动化测试框架?
- java switch原则_Java switch case语句
- 在保护继承中基类的共有成员_c++中的继承
- qmainwindow 标题栏_QMainWindow菜单栏和工具栏
- mysql存储过程返回hello world_Mysql存储过程 之 “Hello,World”
- php在图片左上角加入水印,如何在PHP中将图像添加到图像上,如水印
- 京东下拉词框天猫下拉词框优化推广方法分享
- c语言printf打印字符串,puts()vs printf()用于以C语言打印字符串
- 密度图的密度估计_R-ggridges包:山峰叠峦图