HTML5 × Chart.jsで円グラフを描く

ビジュアライゼーション、データ・ジャーナリズムに活用できそうなツールの使い方を紹介します。今回はChart.jsの第1回。

第1回目なので「Chart.js」の概略から、円グラフを描くまでを。
[完成イメージの確認はこちら]

Chart.jsとは

Chart.js
Chart.js

Javascriptのライブラリ。
HTML5ドキュメント内で使うと、6つのグラフを描けます。

Chart.jsで描画できるグラフ

線グラフ

Chart.js 線グラフ

棒グラフ

Chart.js 棒グラフ

レーダーチャート

Chart.js レーダーチャート

鶏頭図(円グラフの一種)

Chart.js 鶏頭図

円グラフ

Chart.js 円グラフ

ドーナツグラフ

ドーナツグラフ Chart.js

Chart.jsの入手

ライブラリは下記リンク先より入手します。
[ダウンロード]

インクルード

ライブラリの機能を利用するには、HTMLファイルにインクルード設定します。

<!doctype html>
<html>
	<head>
		<title>Chart.jsで描く円グラフ</title>
        <!-- インクルード -->
		<script src="Chart.js"></script>
	</head>

</html>

描画エリアの設定

円グラフを描く領域をcanvasタグで決めます。
ここでは、高さ、幅 500pxに設定。
id属性は、円グラフをどのcanvasに描くのかを示すためにあとで使います。

<!doctype html>
<html>
	<head>
		<title>Chart.jsで描く円グラフ</title>
        <!-- インクルード -->
		<script src="Chart.js"></script>
	</head>
    <body>
    	<!-- 描画エリア -->
	    <canvas id="pieArea" height="500" width="500"></canvas>

    </body>
</html>

円グラフ用データ設定

円グラフを区切る割合(例では、70/15/15)と描画色(例では、#CCCCCC/#FF0066/#666666)を設定します。

<!doctype html>
<html>
	<head>
		<title>Chart.jsで描く円グラフ</title>
        <!-- インクルード -->
		<script src="Chart.js"></script>
	</head>
    <body>
    	<!-- 描画エリア -->
	    <canvas id="pieArea" height="500" width="500"></canvas>
		
		<script>
			<!-- 円グラフ用データ -->
			var pieData = [
				{
					value: 70,
					color:"#CCCCCC"
				},
				{
					value : 15,
					color : "#FF0066"
				},
				{
					value : 15,
					color : "#666666"
				}
			];
			
		</script>
    </body>
</html>

円グラフの描画

円グラフ用データ設定のあとに、次の一行を追加します。

var myPie = new Chart(document.getElementById("pieArea").getContext("2d")).Pie(pieData);

円グラフ用データ「pieData」に設定した内容に基づいて、id属性「pieArea」のcanvasに2Dで描画することを意味しています。

一見、難しく見えますが、構文はいたって簡単。

new Chart(描画エリア).Pie(円グラフ用データ);

最終ソースは次のようになりました。

<!doctype html>
<html>
	<head>
		<title>Chart.jsで描く円グラフ</title>
        <!-- インクルード -->
		<script src="Chart.js"></script>
	</head>
    <body>
    	<!-- 描画エリア -->
	    <canvas id="pieArea" height="500" width="500"></canvas>
		
		<script>
			<!-- 円グラフ用データ -->
			var pieData = [
				{
					value: 70,
					color:"#CCCCCC"
				},
				{
					value : 15,
					color : "#FF0066"
				},
				{
					value : 15,
					color : "#666666"
				}
			];
			<!-- 円グラフ描画 -->
			var myPie = new Chart(document.getElementById("pieArea").getContext("2d")).Pie(pieData);
		</script>
    </body>
</html>

完成形の確認はこちら

Chart.jsの使い方シリーズ目次

連載No. 記事タイトル
第1回 HTML5 × Chart.jsで円グラフを描く
第2回 HTML5 × Chart.jsで円グラフを描く(オプション指定方法)

プロフィール

櫻田潤
櫻田 潤(さくらだ・じゅん)

プログラマー、システムエンジニア、ウェブデザイナーを経て、2010年よりビジュアルシンキングを運営。あわせて、インフォグラフィックのデザインも始める。2014年、NewsPicksにインフォグラフィック・エディターとして参画。ビジュアルを用いた記事を多数、執筆デザイン。2017年よりNewsPicksの全体クリエイティブを統括。著書に『たのしい インフォグラフィック入門』『シンプル・ビジュアル・プレゼンテーション』