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

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

代码不多，很好分析：

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

----

设置 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。

本文转自 powertoolsteam 51CTO博客，原文链接：http://blog.51cto.com/powertoolsteam/857471，如需转载请自行联系原作者