ピックアップ

HTML5 × Chart.jsで円グラフを描く(オプション指定方法)

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

Chart.js 円グラフ 描画

前回は、Chart.jsの概要と円グラフ描画の基礎を書きました。

今回は、円グラフ描画のオプション指定方法について。

何もオプションを指定しないと、前回サンプルのようにアニメーションしながら円グラフを描画します(前回サンプルを見る)。

オプションに指定できる項目は次の通り。

オプション項目

・各パーセンテージを区切る区切り線の有無(デフォルト: 有り)
・区切り線の色(デフォルト: 白)
・区切り線の太さ(デフォルト: 2)
・描画時のアニメーション有無(デフォルト: 有り)
・アニメーションの滑らかさ(デフォルト: 100)
・アニメーション効果の種類(デフォルト: easeOutBounce)
・拡大アニメーションの設定有無(デフォルト: 無し)

区切り線の色と太さを変更し、アニメーションを無しにしてみます。
[完成イメージの確認はこちら]

オプション項目セット

オプション指定したい項目に値をセッティングします。

var pieOption =
	{
		segmentStrokeColor : "#666",// 区切り線の色
		segmentStrokeWidth : 5,		// 区切り線の太さ
		animation : false		// アニメーション有無
	};

オプション指定

円グラフを描画コードにオプション・データ(pieOption)を追加します。

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

構文は次の通り。

new Chart(描画エリア).Pie(円グラフデータ, オプション);

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

<!doctype html>
<html>
	<head>
	    <meta charset="utf-8">
		<title>Chart.jsで描く円グラフ(オプション指定)</title>
        <!-- インクルード -->
		<script src="Chart.js"></script>
	</head>
    <body>
    	<!-- 描画エリア -->
	    <canvas id="pieArea" height="500" width="500"></canvas>
		
		<script>
		<!-- 円グラフ用データ -->
		var pieData = [
			{
				value: 55,
				color:"#CCCCCC"
			},
			{
				value : 15,
				color : "#FF3366"
			},
			{
				value : 15,
				color : "#339999"
			},
			{
				value : 15,
				color : "#FF9933"
			}
		];
		<!-- オプション項目セット -->
		var pieOption =
			{
				segmentStrokeColor : "#666",// 区切り線の色
				segmentStrokeWidth : 5,		// 区切り線の太さ
				animation : false		// アニメーション有無
			};
		<!-- 円グラフ描画 -->
		var myPie = new Chart(document.getElementById("pieArea").getContext("2d")).Pie(pieData,pieOption);
		</script>
    </body>
</html>

アニメーションのオプション

アニメーションのオプションを指定したい場合は、下のコードの中から必要なものをセットします。

// 描画時のアニメーション有無	
animation : true,

// アニメーションの滑らかさ
animationSteps : 100,
	
// アニメーション効果の種類
animationEasing : "easeOutBounce",

// 拡大アニメーションの設定有無
animateScale : false,

アニメーション・スケール

わかりにくいのは、「animationScale」。
「true」にすると、最初は小さい円グラフが表示されて徐々に大きくなっていきます(サンプルを見る)。

アニメーション効果

指定可能なアニメーション効果(animationEasing)は次の通り。

linear
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

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

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

プロフィール

櫻田潤

櫻田 潤

プログラマー、システムエンジニア、ウェブデザイナーを経て、2010年よりビジュアルシンキング運営開始。2014年12月よりNewsPicks編集部でインフォグラフィックス・エディターとして記事執筆。研修・インベント講師や書籍執筆も行なっている。著書に『たのしいインフォグラフィック入門』ほか。

26 Apr, 2013