チャートライブラリの使い方(1)「基本編」
今回から何回かに分けてhifiveのチャートライブラリの使い方を紹介します。
まず今回はごく基本的な折れ線グラフを描いてみます。
サンプルはこちらにあります。結果は次のようなグラフになります。
チャートライブラリの読み込み
チャートを描く際には通常のhifiveに加えて、以下のライブラリを読み込みます。
グラフを表示する
まずHTMLは次のようになります。
<div id="chart" ></div> |
次にJavaScriptの基本形です。 h5.ui.components.chart.ChartController を読み込みます。
var pageController = { | |
__name: 'ui.chart.pageController', | |
_chartController: h5.ui.components.chart.ChartController, // チャートライブラリ | |
__meta: { | |
_chartController: { | |
// グラフを表示するdivタグのIDです。 | |
rootElement: '#chart' | |
} | |
}, | |
__ready: function(context) { | |
// 表示処理を行います | |
}; | |
} | |
h5.core.expose(pageController); |
続いて __ready の内容です。 series はダミーデータが入ります。配列で複数のデータを定義できます。
var series = [this._createNewSeries()]; |
その後はチャートコントローラの初期定義になります。表示範囲、表示方法などを定義します。
this._chartController.draw({ | |
chartSetting: { | |
width: 600, | |
height: 480 | |
}, | |
axes: { | |
xaxis: { | |
off: true | |
}, | |
yaxis: { // y軸 | |
lineNum: 6, // y軸の補助線の数(上部は含む) | |
fontSize: '12pt', // ラベルのフォントサイズ | |
autoScale: function(min, max) { // オートスケールの定義 | |
return { | |
rangeMax: Math.ceil(max / 500) * 500, | |
rangeMin: 260 | |
}; | |
}, | |
} | |
}, | |
seriesDefault: { // すべての系列のデフォルト設定 | |
dispDataSize: 100, | |
}, | |
series: series | |
// 系列データ | |
}); |
ダミーデータを生成するメソッドです。系列データをオブジェクトで返します。
_createNewSeries: function() { | |
var data = createChartDummyData(400, 100); // ダミーデータを生成 | |
// 系列定義 | |
return { | |
name: 'series_1', | |
type: 'line', | |
data: data, | |
propNames: { | |
y: 'val' | |
}, | |
color: 'blue' | |
}; | |
} |
今回は折れ線グラフなので line としています。塗りつぶす場合には stacked_line が使えます(別途背景色も指定します)。線の色は青です。
ダミーデータを返している createChartDummyData には 400 と 100 という2つの引数が設定してあります。これは400を中心に±100(300〜500)のデータを生成します。生成されるデータは val というキーを持っています。
[ | |
{val: 300}, | |
{val: 420}, | |
{val: 320}, | |
: | |
] |
このようなデータ形式になっている必要があります。
今回のサンプルはこちらにあります。業務システムにおいてチャートはよく使われるものです。使い方を覚えてしまえばhifiveで簡単に描けるようになります。次回以降、このサンプルをベースに機能を追加説明していきます。
Trackbacks & Pingbacks
コメントは受け付けていません。