ETERNITY DESIGN BLOG

Chartist.js

グラフを描画するJSには、Chart.jsのような有名なものをはじめD3.jsをベースとしたライブラリなど様々ものがありますが、今回はChartist.jsです。
SVGで描画するライブラリです。

Line Chart 基本

まずは基本。
デモはこちら

var data = {
	labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	series: [
		[5, 2, 4, 2, 0, 1, 10]
	]
};
new Chartist.Line('#demo01_chart', data);

Lineメソッドのパラメーターは以下の通り。

Chartist.Line(query, data, options, responsiveOptions);

ラベルとグリッドのカスタマイズ – Line Chart

次にラベル(Axis)とグリッドのカスタマイズです。
ここで重要になるのは、optionです。

オプションの項目と一部を除いて簡単に説明コメントを記載したサンプルのコードです。
デフォルトオプションの各値については、こちらを参考にしてください。

var demo02_options = {
	axisX: {
		offset: 0,		// X軸ラベルエリアの高さ。ここの数値-10が実際の要素の高さになる
		position: 'end',		// "start"だと上に配置される
		labelOffset: {
			x: 0,
			y: 0
		},
		showLabel: false,	// offsetの数値は維持される
		showGrid: false,
		labelInterpolationFnc: Chartist.noop,
		type: undefined
	},
	axisY: {
		offset: 40,		// Y軸ラベルのwidth
		position: 'start',		// "end"だと右に配置される
		labelOffset: {
			x: 0,
			y: 0
		},
		showLabel: true,
		showGrid: true,
		labelInterpolationFnc: Chartist.noop,
		type: undefined,
		scaleMinSpace: 40,		// 間隔
		onlyInteger: true		// 小数点ラベルの表示
	},
	width: undefined,		// 描画範囲width、グラフが縮むわけではない
	height: undefined,		// 描画範囲height、グラフが縮むわけではない
	showLine: true,			// ラインの描画
	showPoint: true,		// ポイントの描画
	showArea: false,			// ラインの下に薄いエリアの塗りを描画
	areaBase: 0,
	lineSmooth: false,		// いわゆるベジェ曲線か折れ線か
	low: undefined,			// Y軸の最低数値の指定
	high: undefined,
	chartPadding: {			// padding
		top: 20,
		right: 5,
		bottom: 5,
		left: 5
	},
	fullWidth: true,
	reverseData: false		// X軸データを反転
};

new Chartist.Line('#demo02_chart', data, demo02_options);

ラインのカスタマイズ – Line Chart

次にライン自体のカスタマイズです。
カラーや線の太さについては、CSS(scss)での指定となります。簡単ですね。
scssの場合、
_chartist-settings.scssファイルの最下部、$ct-series-colorsで15種類のカラーが指定されています。
ラインの太さは、同ファイル内42行目$ct-line-widthで指定できます。

また、CSSの場合は以下のようなクラスとなります。

.ct-point {
  stroke-width: 10px;
  stroke-linecap: round;
}
.ct-line {
  stroke-width: 1px;
}
.ct-series-a .ct-line {
  stroke: #46b4f8;
}
.ct-series-b .ct-line {
  stroke: #ff9d03;
}

また、グリッドもCSSでの変更が可能です。

データ数とリキッドWidth

ここでは500データの表示と
レスポンシブでは重要なリキッドwidthへの対応です。
ここではデータは自動生成です。
リキッドWidthに関しては特に何もしなくても対応してくれます。
また、Lineメソッドのパラメータにもあるとおり、ブレイクポイントによるレスポンシブにも対応しています。

Pie Chart

最後はPie Chart(Donut Chart)です。
ここではDonutのほうですが、オプションによる対応で、メソッドはPie()です。

new Chartist.Pie('#demo05_chart', {
		series: [20, 10, 30, 40]
	}, {
		donut: true,
		donutWidth: 30,
		showLabel: false
	}
);

他にもBarグラフにも対応しています。

アニメーションでの表示にも対応しています。
CSSでの表現も可能ですが、それで対応できない表現の場合、若干面倒な印象です。

とはいえ、比較的利用しやすいグラフライブラリなのではと感じます。

ABOUT ME

名古屋を中心に、フリーランスでホームページ制作してます。 デザイン・サイト制作・WordPress案件・Flash制作、JavaScript(jQuery)と幅広く対応可能です。 案件のご依頼・ご相談はCONTACTよりご連絡ください。

CATEGORIES

ARCHIVES

TAGS