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 :

$(document).ready(function () {$("#wijcompositechart").wijcompositechart({axis: {y: {text: "Total Hardware"},x: {text: ""}},stacked: false,hint: {content: function () {return this.label '\n ' this.y '';}},header: {text: "Hardware Distribution"},seriesList: [{type: "column",label: "West",legendEntry: true,data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }}, {type: "column",label: "Central",legendEntry: true,data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }}, {type: "column",label: "East",legendEntry: true,data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }}, {type: "pie",label: "asdfdsfdsf",legendEntry: true,center: { x: 150, y: 150 },radius: 60,data: [{label: "MacBook Pro",legendEntry: true,data: 46.78,offset: 15}, {label: "iMac",legendEntry: true,data: 23.18,offset: 0}, {label: "MacBook",legendEntry: true,data: 20.25,offset: 0}]}, {type: "line",label: "Steam1",legendEntry: true,data: {x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],y: [3, 6, 2, 9, 5]},markers: {visible: true,type: "circle"}}, {type: "line",label: "Steam2",legendEntry: true,data: {x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],y: [1, 3, 4, 7, 2]},markers: {visible: true,type: "tri"}}]});});

?

代碼不多，就有了下圖的效果:

代碼不多，很好分析：

--axis: {y: {text: "Total Hardware"},x: {text: ""}--設置X，Y 軸。---stacked: false---設置Bar 為非stacked.---hint: {content: function () {return this.label '\n ' this.y '';}},---設置鼠標 Tooltip.---header: {text: "Hardware Distribution"},---設置圖表頭.----seriesList: [{type: "column",label: "West",legendEntry: true,data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }}, {type: "column",label: "Central",legendEntry: true,data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }}, {type: "column",label: "East",legendEntry: true,data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }}, {type: "pie",label: "asdfdsfdsf",legendEntry: true,center: { x: 150, y: 150 },radius: 60,data: [{label: "MacBook Pro",legendEntry: true,data: 46.78,offset: 15}, {label: "iMac",legendEntry: true,data: 23.18,offset: 0}, {label: "MacBook",legendEntry: true,data: 20.25,offset: 0}]}, {type: "line",label: "Steam1",legendEntry: true,data: {x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],y: [3, 6, 2, 9, 5]},markers: {visible: true,type: "circle"}}, {type: "line",label: "Steam2",legendEntry: true,data: {x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],y: [1, 3, 4, 7, 2]},markers: {visible: true,type: "tri"}}]

?

----

設置 SeriesList，每個Series 可以設置其type, label, legendEntry, data, 等等屬性。 Series可以設置 SeriesStyles, 和 SeriesHoverStyles, 如:

seriesStyles: [{fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8}],seriesHoverStyles: [{"stroke-width": "1.5", opacity: 1}]

?

經過上面的設置，這個CompositeChart就設置好了。也可以使用Server返回的 Json 數據動態綁定生成Chart。

?

點擊這里下載，本文實例代碼。

?

Wijmo下載，請進入Studio for ASP.NET Wijmo 2012 v1正式發布（2012.03.22更新）!

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Wijmo 更优美的jQuery UI部件集：复合图表(CompositeChart)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。