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更新）!