凡例によるチャートデータの説明
最後にこのチャートがどういったチャートであるかを示す凡例を追加するため、凡例用のHTML要素を設定します。
コード例6 凡例用の領域を設定
<body>
<table>
<tbody>
<tr>
<td>
<!-- チャートの領域 -->
<div id="igDataChart1"></div>
</td>
<td style="vertical-align: top">
<!-- 凡例の領域 -->
<div id="legend"></div>
</td>
</tr>
</tbody>
</table>
</body>
コードでは、legendプロパティを設定します。
コード例7 凡例の設定
legend: { element: "legend", type: "legend" }
図6 凡例が表示された
これで必要な情報を提示しつつ、ユーザーがより細かい情報を見ることができるようになりました。
ここまでのすべてのコードは、次のようになります。
コード例8 すべてを実装したコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>igDataChart</title>
<!-- 必要なスクリプトファイルの読み込み -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.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: "stockSeries",
type: "financial",
xAxis: "axisX",
yAxis: "axisY",
openMemberPath: "Start",
lowMemberPath: "Low",
highMemberPath: "High",
closeMemberPath: "End",
title: "株価",
trendLineType: "simpleAverage",
trendLineThickness: 4,
trendLineBrush: "red",
trendLinePeriod: 7
}
],
horizontalZoomable: true,
verticalZoomable: true,
overviewPlusDetailPaneVisibility: "visible",
legend: { element: "legend", type: "legend" }
});
}
});
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<!-- チャートの領域 -->
<div id="igDataChart1"></div>
</td>
<td style="vertical-align: top">
<!-- 凡例の領域 -->
<div id="legend"></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
まとめ
今回はHTML5対応jQueryコンポーネントである、Ignite UIのigDataChartのさまざまな機能を有効化し、データの提示により意味を持たせたり、ユーザーの操作に応じて表示領域を変更する機能を紹介しました。コンポーネントが実現する機能を活用することで、それぞれを一から作るという工数を削減することが可能になります。ぜひ、試してみてください。次回はチャートに渡すデータの設定方法の詳細について解説を行います。
