ラインチャートの設定
それではチャートの各項目を設定していきましょう。本稿では、株価の終値のみをシンプルにラインで表示することをゴールとします。すべてのリソースが読み込まれた時点で“igDataChart1”というIDが設定されている要素に対してチャートを利用することを宣言し、利用するデータソース、並びにチャート領域の幅、高さなどを設定します。
コード例4 チャートの基本的な設定
$("#igDataChart1").igDataChart({
dataSource: jpStockData,
width: "800px",
height: "600px"
});
次にこのチャートで利用する軸を設定します。X軸にはカテゴリ軸を、Y軸には数値軸を定義します。
コード例5 軸の設定
// 軸の定義
axes: [{
// X 軸
name: "axisX",
type: "categoryX",
label: "DateData"
},
{
// Y 軸
name: "axisY",
type: "numericY"
}]
さらにチャートの種類である、シリーズを定義します。
コード例6 シリーズの設定
// シリーズの設定
series: [{
name: "startSeries",
type: "line",
xAxis: "axisX",
yAxis: "axisY",
valueMemberPath: "End"
}]
これで、チャートにデータが反映されることになります。
図4 チャートに株価の終値が表示された
ここまでのコードをまとめたものが、コード例7です。
コード例7 チャート表示に最低限必要なソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>igDataChart</title>
<!-- 必要なスクリプトファイルの読み込み -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<!-- Infragistics Loader を読み込み -->
<script src="IG/js/infragistics.loader.js" type="text/javascript"></script>
<!-- チャートデータを読み込み -->
<script src="SampleData.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
// Infragistics Loader で igDataChart 関連リソースを呼び出します。
$.ig.loader({
scriptPath: 'IG/js',
cssPath: 'IG/css',
resources: 'igDataChart.*',
ready: function ()
{
// リソースがロードされた段階で処理を開始します。
// チャートの初期化を行います。
$("#igDataChart1").igDataChart({
dataSource: jpStockData,
width: "800px",
height: "600px",
// 軸の定義
axes: [{
// X 軸
name: "axisX",
type: "categoryX",
label: "DateData"
},
{
// Y 軸
name: "axisY",
type: "numericY"
}],
// シリーズの設定
series: [{
name: "endSeries",
type: "line",
xAxis: "axisX",
yAxis: "axisY",
valueMemberPath: "End"
}]
});
}
});
});
</script>
</head>
<body>
<div id="igDataChart1"></div>
</body>
</html>
これらのように、igDataChartを利用してデータ表示する場合、最低限必要な項目は次の4点です。
- チャート領域
- データ
- 軸
- シリーズ
繰り返しですが、利用する軸やシリーズによっては、複数のプロパティに値を割り当てる必要があります。詳細はオンラインヘルプを参照してください。
今回のデータを利用し、シリーズを変更すると以下のような表示です。
図5 財務シリーズ
このほかに先述の凡例やナビゲーション、十字ポインター、マーカーなど、よりデータを理解しやすい機能を有効にすることができます。
まとめ
今回は、HTML5対応jQueryコンポーネントであるIgnite UIのigDataChartにおいてチャートを表示させる方法をご紹介しました。高機能かつ、高パフォーマンスなチャートを利用することで、より魅力的なクロスブラウザ対応Webアプリケーションを作成することが可能になります。ぜひ、利用者に理解しやすいデータ表現を試してみてください。次回はこのチャートに機能を追加し、ユーザーとのインタラクションを実現する方法をご紹介します。
