| MVC Classic ウィジェット > Chart ウィジェット > Wijpiechart > Wijpiechart チュートリアル > 手順 2：ウィジェットの初期化 |
前の手順では、マークアップを追加し、散布図に表示されるコンテンツを追加しました。ここで、jQuery スクリプトを追加し、ウィジェットを初期化して、さらに、X と Y 軸のテキスト設定、グラフラベルへのツールチップの追加、「ハードウェア販売」という名前のグラフヘッダーの追加を行った後、seriesList を使用して X 軸に文字列データと Y 軸に数値データを持つ３つのデータ系列を作成できます。
前の手順で追加した終了の </div>タグの後に、次の jQuery スクリプトを入力し、wijpiechart ウィジェットを初期化します。
| ソースビュー |
コードのコピー
|
|---|---|
<style type="text/css">
#wijpiechart
{
width: 756px;
height: 475px;
}
</style>
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijpiechart").wijpiechart({
radius: 140,
legend: { visible: true },
hint: {
content: function () {
return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
}
},
header: {
text: "機種の割合"
},
seriesList: [{
label: "種類1",
legendEntry: true,
data： 46.78,
offset: 15
}, {
label: "種類2",
legendEntry: true,
data： 23.18,
offset: 0
}, {
label: "種類3",
legendEntry: true,
data： 20.25,
offset: 0
}, {
label: "種類4",
legendEntry: true,
data： 5.41,
offset: 0
}, {
label: "種類5",
legendEntry: true,
data： 3.44,
offset: 0
}],
seriesStyles: [{
fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(175,229,0)", "stroke-width": "1.5"
}, {
fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(127,199,60)", "stroke-width": "1.5"
}, {
fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(95,153,150)", "stroke-width": "1.5"
}, {
fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(62,95,119)", "stroke-width": "1.5"
}, {
fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(149,149,149)", "stroke-width": "1.5"
}]
});
});
</script>
|
|