| MVC Classic ウィジェット > Chart ウィジェット > Wijbarchart > Wijbarchart チュートリアル > 手順 2：ウィジェットの初期化 |
前の手順では、マークアップを追加し、棒グラフに表示するコンテンツを追加しました。ここで、jQuery スクリプトを追加し、ウィジェットを初期化して、さらに、X と Y 軸のテキスト設定、グラフラベルへのツールチップの追加、「ハードウェア販売」という名前のグラフヘッダーの追加を行った後、seriesList を使用して X 軸に文字列データと Y 軸に数値データを持つ３つのデータ系列を作成できます。
前の手順で追加した終了のタグの後に、次の jQuery スクリプトを入力して、wijbarchart ウィジェットを初期化します。
| ソースビュー |
コードのコピー
|
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijbarchart").wijbarchart({
axis: {
y: {
text: "ハードウェア数"
},
x: {
text: ""
}
},
hint: {
content: function () {
return this.data.label + '<br/> ' + this.y + '';
}
},
header: {
text: "ハードウェア分布"
},
seriesList: [{
label: "西",
legendEntry: true,
data: { x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [5, 3, 4, 7, 2] }
}, {
label: "中央",
legendEntry: true,
data: { x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [2, 2, 3, 2, 1] }
}, {
label: "東",
legendEntry: true,
data: { x: ['デスクトップ', 'ノート', '一体型', 'タブレット', '携帯電話'], y: [3, 4, 4, 2, 5] }
}]
});
});
</script>
|
|