| MVC Classic ウィジェット > Chart ウィジェット > Wijbubblechart > Wijbubblechart チュートリアル > 手順 2：ウィジェットの初期化 |
前の手順では、マークアップを追加し、バブルチャートに表示するコンテンツを追加しました。ここで、jQuery スクリプトを追加し、ウィジェットを初期化して、さらに、X と Y 軸のテキスト設定、グラフラベルへのツールチップの追加、「ハードウェア販売」という名前のグラフヘッダーの追加を行った後、seriesList を使用して X 軸に文字列データと Y 軸に数値データを持つ３つのデータ系列を作成できます。
前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力して、wijbubblechart ウィジェットを初期化します。
| ソースビュー |
コードのコピー
|
|---|---|
<script type="text/javascript">
$(document).ready(function () {
$("#wijbubblechart").wijbubblechart({
minimumSize: 3,
MaximumSize: 15,
axis: {
y: {
text: "ハードウェア数"
},
x: {
text: ""
}
},
hint: {
content: function () {
return 'x:' + this.x + ',y:' + this.y + ",y1:" + this.data.y1;
}
},
header: {
text: "ハードウェア分布"
},
seriesList: [{
label: "西",
legendEntry: true,
data: { x: [5, 14, 20, 18, 22], y: [5500, 12200, 60000, 24400, 32000], y1: [3, 12, 33, 10, 42] }
// markers: {
型： 'tri'
// }
}]
});
});
</script>
|
|