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

by moongift : 2017/04/18

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

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

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

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

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

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 というキーを持っています。

view raw

gistfile1.txt

hosted with ❤ by GitHub

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

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

From → hifive

3件のコメント

コメントは受け付けていません。

最近の投稿