SVGでグラフを描写できるChartist.js

こんにちは、ウェブラボ技術メモです。

今回はSVGでグラフを描写できる「Chartist.js」を紹介いたします。

DEMOはこちら

よく見かける円グラフなどが、簡単に設定できてしまいます。
ちょっと数値を変更したいといった修正作業もお手軽なので魅力的ですね。

それでは実際に実装していきましょう。

以下からプラグインをダウンロードしてください。

github

まずはhead内でjquery本体とプラグインを読み込ませます。

■HTMLhead内

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/chartist.js"></script>

次にプラグインのオプション設定を行います。

今回は円グラフの例を紹介いたします。

■HTMLhead内　スクリプト部分

<script>
	let chart = new Chartist.Pie('.circle_chart', {
		series: [50, 30, 20],	//円グラフの数値を入力します。数を増やすときは「,」を追加します。
		labels: ['赤 50%','青 30%','緑 20%']	//円グラフのラベルを入力します。
	});
</script>

次にスクリプト内で指定した要素とidをHTMLのbody内に記述します。

■HTML body内

<div class="circle_chart"></div>

このままですと真っ黒な円グラフが表示されてしまいますので、

最後にCSSで装飾を行います。

■HTMLhead内　CSS部分

.circle_chart{	//グラフのサイズと表示位置を決めます
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.circle_chart .ct-series-a .ct-slice-pie{  //1つ目の数値の背景色を決めます。カラーコード使用可。
	stroke: red;
	fill: red;
}

.circle_chart .ct-series-b .ct-slice-pie{  //2つ目の数値の背景色を決めます。
	stroke: blue;
	fill: blue;
}

.circle_chart .ct-series-c .ct-slice-pie{  //3つ目の数値の背景色を決めます。
	stroke: green;
	fill: green;
}

.circle_chart .ct-label{  //ラベルの文字色を変更します。
	fill: #fff;
}

数値の種類が増えるたびに「.ct-series-X」のX部分が「a」「b」「c」「d」…と続いていきます。
好みにカスタマイズしてみましょう。

ブラウザ互換性については「Chartist.js」に記載されております。

以上、技術メモでした。