チャートライブラリの使い方（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
コメントは受け付けていません。