文档章节

Wijmo 更优美的jQuery UI部件集:复合图表(CompositeChart)

葡萄城技术团队
 葡萄城技术团队
发布于 2014/06/11 12:09
字数 805
阅读 7
收藏 0

image

Wijmo的CompositeChart控件允许您使用一个Chart来分析和展现复杂的数据。相同的数据可以使用不同的可视化效果,不同的图表类型展现在一个图表内,使得用户可以从不同的角度,了解分析这组数据所表达的内容 。

本文将介绍如何使用Wijmo的CompositeChart控件,制作一个复合图表。CompositeChart 的API:http://wijmo.com/wiki/index.php/Compositechart,Wijmo 的CompositeChart 化繁为简,将传统 Excel like图表中的三大区域: Plot Area, Legend Area, Label Area, 分离成为更为简单的API: SeriesList, Legend, Axis, Hint, 使得开发者更加容易的理解和使用。

Wijmo的CompositeChart 依赖于下面的这5个核心的JavaScript库:

raphael.js

globalize.min.js

jquery.ui.widget.js

jquery.wijmo.raphael.js

jquery.wijmo.wijchartcore.js

如果需要加入别的类型的Chart,需要再引入其它Chart类型的JavaScript库,这样可以使得开发者可以灵活定制并裁剪出适合自己用例的JavaScript库。例如本实例使用了 PieChart, BarChart, LineChart, 引入的JavaScript库如下:

jquery-1.7.1.min.js

jquery-ui-1.8.18.custom.min.js

globalize.min.js

raphael-min.js

jquery.wijmo.raphael.js

jquery.wijmo.wijchartcore.js

jquery.wijmo.wijbarchart.js

jquery.wijmo.wijpiechart.js

jquery.wijmo.wijlinechart.js

jquery.wijmo.wijcompositechart.js

写点代码,设置一下Chart :

 


  
  1. $(document).ready(function () { 
  2.  
  3. $("#wijcompositechart").wijcompositechart({ 
  4.  
  5. axis: { 
  6.  
  7. y: { 
  8.  
  9. text: "Total Hardware" 
  10.  
  11. }, 
  12.  
  13. x: { 
  14.  
  15. text: "" 
  16.  
  17.  
  18. }, 
  19.  
  20. stacked: false, 
  21.  
  22. hint: { 
  23.  
  24. content: function () { 
  25.  
  26. return this.label + '\n ' + this.y + ''; 
  27.  
  28.  
  29. }, 
  30.  
  31. header: { 
  32.  
  33. text: "Hardware Distribution" 
  34.  
  35. }, 
  36.  
  37. seriesList: [{ 
  38.  
  39. type: "column", 
  40.  
  41. label: "West", 
  42.  
  43. legendEntry: true, 
  44.  
  45. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] } 
  46.  
  47. }, { 
  48.  
  49. type: "column", 
  50.  
  51. label: "Central", 
  52.  
  53. legendEntry: true, 
  54.  
  55. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] } 
  56.  
  57. }, { 
  58.  
  59. type: "column", 
  60.  
  61. label: "East", 
  62.  
  63. legendEntry: true, 
  64.  
  65. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] } 
  66.  
  67. }, { 
  68.  
  69. type: "pie", 
  70.  
  71. label: "asdfdsfdsf", 
  72.  
  73. legendEntry: true, 
  74.  
  75. center: { x: 150, y: 150 }, 
  76.  
  77. radius: 60, 
  78.  
  79. data: [{ 
  80.  
  81. label: "MacBook Pro", 
  82.  
  83. legendEntry: true, 
  84.  
  85. data: 46.78, 
  86.  
  87. offset: 15 
  88.  
  89. }, { 
  90.  
  91. label: "iMac", 
  92.  
  93. legendEntry: true, 
  94.  
  95. data: 23.18, 
  96.  
  97. offset: 0 
  98.  
  99. }, { 
  100.  
  101. label: "MacBook", 
  102.  
  103. legendEntry: true, 
  104.  
  105. data: 20.25, 
  106.  
  107. offset: 0 
  108.  
  109. }] 
  110.  
  111. }, { 
  112.  
  113. type: "line", 
  114.  
  115. label: "Steam1", 
  116.  
  117. legendEntry: true, 
  118.  
  119. data: { 
  120.  
  121. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
  122.  
  123. y: [3, 6, 2, 9, 5] 
  124.  
  125. }, 
  126.  
  127. markers: { 
  128.  
  129. visible: true, 
  130.  
  131. type: "circle" 
  132.  
  133.  
  134. }, { 
  135.  
  136. type: "line", 
  137.  
  138. label: "Steam2", 
  139.  
  140. legendEntry: true, 
  141.  
  142. data: { 
  143.  
  144. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
  145.  
  146. y: [1, 3, 4, 7, 2] 
  147.  
  148. }, 
  149.  
  150. markers: { 
  151.  
  152. visible: true, 
  153.  
  154. type: "tri" 
  155.  
  156.  
  157.  
  158.  
  159. }); 
  160.  
  161. }); 

 

代码不多,就有了下图的效果:

1

代码不多,很好分析:

 


  
  1. -- 
  2.  
  3. axis: { 
  4.  
  5. y: { 
  6.  
  7. text: "Total Hardware" 
  8.  
  9. }, 
  10.  
  11. x: { 
  12.  
  13. text: "" 
  14.  
  15.  
  16. -- 
  17.  
  18. 设置X,Y 轴。 
  19.  
  20. --- 
  21.  
  22. stacked: false 
  23.  
  24. --- 
  25.  
  26. 设置Bar 为非stacked. 
  27.  
  28. --- 
  29.  
  30. hint: { 
  31.  
  32. content: function () { 
  33.  
  34. return this.label + '\n ' + this.y + ''; 
  35.  
  36.  
  37. }, 
  38.  
  39. --- 
  40.  
  41. 设置鼠标 Tooltip. 
  42.  
  43. --- 
  44.  
  45. header: { 
  46.  
  47. text: "Hardware Distribution" 
  48.  
  49. }, 
  50.  
  51. --- 
  52.  
  53. 设置图表头. 
  54.  
  55. ---- 
  56.  
  57. seriesList: [{ 
  58.  
  59. type: "column", 
  60.  
  61. label: "West", 
  62.  
  63. legendEntry: true, 
  64.  
  65. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] } 
  66.  
  67. }, { 
  68.  
  69. type: "column", 
  70.  
  71. label: "Central", 
  72.  
  73. legendEntry: true, 
  74.  
  75. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] } 
  76.  
  77. }, { 
  78.  
  79. type: "column", 
  80.  
  81. label: "East", 
  82.  
  83. legendEntry: true, 
  84.  
  85. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] } 
  86.  
  87. }, { 
  88.  
  89. type: "pie", 
  90.  
  91. label: "asdfdsfdsf", 
  92.  
  93. legendEntry: true, 
  94.  
  95. center: { x: 150, y: 150 }, 
  96.  
  97. radius: 60, 
  98.  
  99. data: [{ 
  100.  
  101. label: "MacBook Pro", 
  102.  
  103. legendEntry: true, 
  104.  
  105. data: 46.78, 
  106.  
  107. offset: 15 
  108.  
  109. }, { 
  110.  
  111. label: "iMac", 
  112.  
  113. legendEntry: true, 
  114.  
  115. data: 23.18, 
  116.  
  117. offset: 0 
  118.  
  119. }, { 
  120.  
  121. label: "MacBook", 
  122.  
  123. legendEntry: true, 
  124.  
  125. data: 20.25, 
  126.  
  127. offset: 0 
  128.  
  129. }] 
  130.  
  131. }, { 
  132.  
  133. type: "line", 
  134.  
  135. label: "Steam1", 
  136.  
  137. legendEntry: true, 
  138.  
  139. data: { 
  140.  
  141. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
  142.  
  143. y: [3, 6, 2, 9, 5] 
  144.  
  145. }, 
  146.  
  147. markers: { 
  148.  
  149. visible: true, 
  150.  
  151. type: "circle" 
  152.  
  153.  
  154. }, { 
  155.  
  156. type: "line", 
  157.  
  158. label: "Steam2", 
  159.  
  160. legendEntry: true, 
  161.  
  162. data: { 
  163.  
  164. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
  165.  
  166. y: [1, 3, 4, 7, 2] 
  167.  
  168. }, 
  169.  
  170. markers: { 
  171.  
  172. visible: true, 
  173.  
  174. type: "tri" 
  175.  
  176.  
  177.  

 

----

设置 SeriesList,每个Series 可以设置其type, label, legendEntry, data, 等等属性。 Series可以设置 SeriesStyles, 和 SeriesHoverStyles, 如:

 


  
  1. seriesStyles: [{ 
  2.  
  3. fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8 
  4.  
  5. }], 
  6.  
  7. seriesHoverStyles: [{ 
  8.  
  9. "stroke-width": "1.5", opacity: 1 
  10.  
  11. }] 

 

经过上面的设置,这个CompositeChart就设置好了。也可以使用Server返回的 Json 数据动态绑定生成Chart。

 

点击这里下载,本文实例代码。

 

Wijmo下载,请进入Studio for ASP.NET Wijmo 2012 v1正式发布(2012.03.22更新)!

本文出自 “葡萄城控件博客” 博客,请务必保留此出处http://powertoolsteam.blog.51cto.com/2369428/857471

© 著作权归作者所有

共有 人打赏支持
葡萄城技术团队

葡萄城技术团队

粉丝 383
博文 535
码字总数 778364
作品 17
西安
高级程序员
私信 提问
jQuery UI组件集 - Wijmo

Wijmo是用于创建桌面及移动Web应用程序的HTML5前端控件集。从交互式图表到强大的表格控件,Wijmo包含了用户所需要的一切。Wijmo建立在标准的JavaScript库基础上,就像jQuery UI和jQuery Mobi...

匿名
2010/10/28
0
0
jQuery UI 组件集 Wijmo 五年最大更新,Mobile First!

2010年,在美国 波士顿举行的 jQuery 大会上,由GrapeCity旗下的ComponentOne所开发的Wijmo首次展露在世人的面前。如今,距离开发已有五年,拥有一套基于jQuery UI的UI组件集的Wijmo凭借其优...

葡萄城技术团队
2014/09/09
5K
34
分享40个实用的jQuery用户界面UI设计技巧及教程

作者:Jane Bernardo 翻译:Terry li - GBin1.com 原文: 40 Useful jQuery Techniques And Tutorials For Great User Interface jQuery在web开发中已经吸引了大量开发人员。使用jQuery能构建......

gbin1
2011/07/19
2.1K
0
Mobile First! Wijmo 5 之 架构

CSDN移动开发频道率先报道的《Mobile First!jQuery UI组件集Wijmo五年最大更新》引起开发者极大关注。 本文就开发者关心的话题之一架构,展开叙述。 Wijmo 5是一组JavaScript控件,但是不要...

葡萄城控件技术团队
2014/10/22
0
1
10大优秀的移动Web应用程序开发框架

今天这篇文章向大家推荐10大优秀的移动Web开发框架,帮助开发者更加高效的开发移动Web应用。 1.Sencha Touch Framework Sencha Touch是世界上第一个基于HTML5的移动Web开发框架,支持最新的H...

晨曦之光
2012/03/01
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

Perl - 获取文件项目

参考:http://www.runoob.com/perl/perl-directories.html 下面返回JSON格式的文件列表 #!/usr/bin/perluse strict;use warnings;use utf8;use feature ':5.26';require Fi......

wffger
昨天
1
0
vue组件系列3、查询下载

直接源码,虽然样式样式不好看,逻辑也不是最优,但是可以留作纪念。毕竟以后类似的功能只需要优化就可以了,不用每次都重头开始。。。 <template> <div class="pre_upload"> <div ...

轻轻的往前走
昨天
1
0
java浅复制和深复制

之前写了数组的复制,所以这里继续总结一下浅复制和深复制。 浅拷贝:对基本数据类型进行值传递,对引用数据类型进行引用传递般的拷贝。 深拷贝:对基本数据类型进行值传递,对引用数据类型,...

woshixin
昨天
1
0
kubernetes 二进制包安装

环境 角色 主机名 内网 IP 集群 IP 操作系统 服务 执行目录 部署机 k8s-master master120 10.0.4.120 - CentOS kube-apiserver kube-scheduler kube-controller-manager /opt/kubernetes/ et......

Colben
昨天
8
0
瑞达利欧的《原则》读后感作文2400字

瑞达利欧的《原则》读后感作文2400字: 拿到同事送的书读了几十页后,我意识到自己犯了一个错误:之前以为像《原则》这个书名,配上最成功的对冲基金经理、受用终身的教诲、傅盛引用并盛赞,...

原创小博客
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部