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. $("#wijcompositechart").wijcompositechart({
   
3. axis: {
   
4. y: {
   
5. text: "Total Hardware"
   
6. },
   
7. x: {
   
8. text: ""
   
9. }
   
10. },
    
11. stacked: false,
    
12. hint: {
    
13. content: function () {
    
14. return this.label + '\n ' + this.y + '';
    
15. }
    
16. },
    
17. header: {
    
18. text: "Hardware Distribution"
    
19. },
    
20. seriesList: [{
    
21. type: "column",
    
22. label: "West",
    
23. legendEntry: true,
    
24. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
    
25. }, {
    
26. type: "column",
    
27. label: "Central",
    
28. legendEntry: true,
    
29. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
    
30. }, {
    
31. type: "column",
    
32. label: "East",
    
33. legendEntry: true,
    
34. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
    
35. }, {
    
36. type: "pie",
    
37. label: "asdfdsfdsf",
    
38. legendEntry: true,
    
39. center: { x: 150, y: 150 },
    
40. radius: 60,
    
41. data: [{
    
42. label: "MacBook Pro",
    
43. legendEntry: true,
    
44. data: 46.78,
    
45. offset: 15
    
46. }, {
    
47. label: "iMac",
    
48. legendEntry: true,
    
49. data: 23.18,
    
50. offset: 0
    
51. }, {
    
52. label: "MacBook",
    
53. legendEntry: true,
    
54. data: 20.25,
    
55. offset: 0
    
56. }]
    
57. }, {
    
58. type: "line",
    
59. label: "Steam1",
    
60. legendEntry: true,
    
61. data: {
    
62. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
    
63. y: [3, 6, 2, 9, 5]
    
64. },
    
65. markers: {
    
66. visible: true,
    
67. type: "circle"
    
68. }
    
69. }, {
    
70. type: "line",
    
71. label: "Steam2",
    
72. legendEntry: true,
    
73. data: {
    
74. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
    
75. y: [1, 3, 4, 7, 2]
    
76. },
    
77. markers: {
    
78. visible: true,
    
79. type: "tri"
    
80. }
    
81. }
    
82. ]
    
83. });
    
84. });

复制代码

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




代码不多，很好分析：

1. --
   
2. axis: {
   
3. y: {
   
4. text: "Total Hardware"
   
5. },
   
6. x: {
   
7. text: ""
   
8. }
   
9. --
   
10. 设置X，Y 轴。
    
11. ---
    
12. stacked: false
    
13. ---
    
14. 设置Bar 为非stacked.
    
15. ---
    
16. hint: {
    
17. content: function () {
    
18. return this.label + '\n ' + this.y + '';
    
19. }
    
20. },
    
21. ---
    
22. 设置鼠标 Tooltip.
    
23. ---
    
24. header: {
    
25. text: "Hardware Distribution"
    
26. },
    
27. ---
    
28. 设置图表头.
    
29. ----
    
30. seriesList: [{
    
31. type: "column",
    
32. label: "West",
    
33. legendEntry: true,
    
34. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
    
35. }, {
    
36. type: "column",
    
37. label: "Central",
    
38. legendEntry: true,
    
39. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
    
40. }, {
    
41. type: "column",
    
42. label: "East",
    
43. legendEntry: true,
    
44. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
    
45. }, {
    
46. type: "pie",
    
47. label: "asdfdsfdsf",
    
48. legendEntry: true,
    
49. center: { x: 150, y: 150 },
    
50. radius: 60,
    
51. data: [{
    
52. label: "MacBook Pro",
    
53. legendEntry: true,
    
54. data: 46.78,
    
55. offset: 15
    
56. }, {
    
57. label: "iMac",
    
58. legendEntry: true,
    
59. data: 23.18,
    
60. offset: 0
    
61. }, {
    
62. label: "MacBook",
    
63. legendEntry: true,
    
64. data: 20.25,
    
65. offset: 0
    
66. }]
    
67. }, {
    
68. type: "line",
    
69. label: "Steam1",
    
70. legendEntry: true,
    
71. data: {
    
72. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
    
73. y: [3, 6, 2, 9, 5]
    
74. },
    
75. markers: {
    
76. visible: true,
    
77. type: "circle"
    
78. }
    
79. }, {
    
80. type: "line",
    
81. label: "Steam2",
    
82. legendEntry: true,
    
83. data: {
    
84. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
    
85. y: [1, 3, 4, 7, 2]
    
86. },
    
87. markers: {
    
88. visible: true,
    
89. type: "tri"
    
90. }
    
91. }
    
92. ]
    
93. ----

复制代码

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

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

复制代码

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

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