| MVC Classic ウィジェット > Chart ウィジェット > Wijlinechart > Wijlinechart チュートリアル > 手順 2：ウィジェットの初期化 |
前の手順では、マークアップを追加し、折れ線グラフに表示されるコンテンツを追加しました。ここで、jQuery スクリプトを追加し、ウィジェットを初期化して、さらに、X と Y 軸のテキスト設定、グラフラベルへのツールチップの追加、「ハードウェア販売」という名前のグラフヘッダーの追加を行った後、seriesList を使用して X 軸に文字列データと Y 軸に数値データを持つ３つのデータ系列を作成できます。
前の手順で追加した終了の<div>タグの後に、次の jQuery スクリプトを入力し、wijlinechart ウィジェットを初期化します。
| ソースビュー |
コードのコピー
|
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijlinechartDefault").wijlinechart({
culture: "ja-JP"
header: {
visible： true,
text: "オンラインユーザーの数",
textStyle: {
fill: "#7f7f7f"
}
},
axis: {
y: {
labels: {
style: {
fill: "#7f7f7f",
"font-size": "11pt"
}
},
gridMajor: {
style: {stroke: "#353539", "stroke-dasharray": "- " }
},
tickMajor: { position: "outside", style: {stroke: "#7f7f7f"} },
tickMinor: { position: "outside", style: {stroke: "#7f7f7f"} }
},
x: {
labels: {
style: {
fill: "#7f7f7f",
"font-size": "11pt",
rotation: -45
}
},
tickMajor: { position: "outside", style: {stroke: "#7f7f7f"} }
}
},
showChartLabels: false,
hint: {
content: function () {
return this.data.lineSeries.label + '\n' +
this.x + '\n' + this.y + '';
},
contentStyle: {
"font-size": "10pt"
},
offsetY: -10
},
legend: {
visible： false
},
seriesList: [
{
label: "オンラインユーザーの数",
legendEntry: true,
fitType: "spline",
data： {
x: [new Date('10/27/2010 11:48:00'),
new Date('10/27/2010 13:47:00'),
new Date('10/27/2010 15:46:00'),
new Date('10/27/2010 17:45:00'),
new Date('10/27/2010 19:44:00'),
new Date('10/27/2010 21:43:00'),
new Date('10/27/2010 23:41:00'),
new Date('10/28/2010 1:40:00'),
new Date('10/28/2010 3:39:00'),
new Date('10/28/2010 5:38:00'),
new Date('10/28/2010 7:37:00'),
new Date('10/28/2010 9:36:00'),
new Date('10/28/2010 11:35:00'),
new Date('10/28/2010 13:34:00'),
new Date('10/28/2010 15:33:00'),
new Date('10/28/2010 17:32:00'),
new Date('10/28/2010 19:31:00'),
new Date('10/28/2010 21:30:00'),
new Date('10/28/2010 23:38:00'),
new Date('10/29/2010 1:27:00'),
new Date('10/29/2010 3:26:00'),
new Date('10/29/2010 5:25:00'),
new Date('10/29/2010 7:24:00'),
new Date('10/29/2010 9:23:00'),
new Date('10/29/2010 11:22:00')],
y: [2665513, 2300921, 1663229, 1622528, 1472847,
1354026, 1348909, 1514946, 1746392,
2020481, 2312976, 2539210, 2657505,
2369938, 1869805, 1648695, 1529983,
1398148, 1389668, 1568134, 1787466,
2101460, 2090771, 2351994, 2537400]
},
markers: {
visible： true,
type: "circle"
}
}
],
seriesStyles: [
{stroke: "#ff9900", "stroke-width": "3" }
]
});
});
</script>
|
|