欢迎访问 licqi IT技术
我们一直在努力

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

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. -- 
  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更新)!

赞(0) 打赏
未经允许不得转载:licqi IT技术 » Wijmo 更优美的jQuery UI部件集:复合图表(CompositeChart)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏