コンテンツへスキップ

チャートライブラリの使い方(1)「基本編」

by : 2017/04/18

今回から何回かに分けてhifiveのチャートライブラリの使い方を紹介します。

まず今回はごく基本的な折れ線グラフを描いてみます。

サンプルはこちらにあります。結果は次のようなグラフになります。

チャートライブラリの読み込み

チャートを描く際には通常のhifiveに加えて、以下のライブラリを読み込みます。

グラフを表示する

まずHTMLは次のようになります。

<div id="chart" ></div>

view raw
index.js
hosted with ❤ by GitHub

次に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);

view raw
index.js
hosted with ❤ by GitHub

続いて __ready の内容です。 series はダミーデータが入ります。配列で複数のデータを定義できます。

var series = [this._createNewSeries()];

view raw
index.js
hosted with ❤ by GitHub

その後はチャートコントローラの初期定義になります。表示範囲、表示方法などを定義します。

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
// 系列データ
});

view raw
index.js
hosted with ❤ by GitHub

ダミーデータを生成するメソッドです。系列データをオブジェクトで返します。

_createNewSeries: function() {
var data = createChartDummyData(400, 100); // ダミーデータを生成
// 系列定義
return {
name: 'series_1',
type: 'line',
data: data,
propNames: {
y: 'val'
},
color: 'blue'
};
}

view raw
index.js
hosted with ❤ by GitHub

今回は折れ線グラフなので line としています。塗りつぶす場合には stacked_line が使えます(別途背景色も指定します)。線の色は青です。

ダミーデータを返している createChartDummyData には 400 と 100 という2つの引数が設定してあります。これは400を中心に±100(300〜500)のデータを生成します。生成されるデータは val というキーを持っています。

[
{val: 300},
{val: 420},
{val: 320},
:
]

view raw
gistfile1.txt
hosted with ❤ by GitHub

このようなデータ形式になっている必要があります。


今回のサンプルはこちらにあります。業務システムにおいてチャートはよく使われるものです。使い方を覚えてしまえばhifiveで簡単に描けるようになります。次回以降、このサンプルをベースに機能を追加説明していきます。

banner_02

From → hifive

%d人のブロガーが「いいね」をつけました。