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