Chart.jsの簡単マニュアル - ストックドッグ

Chart.jsとは

公式ページ参照。

www.chartjs.org

最新のCDNのURLを参照

サンプル

Chart.jsの各設定

Canvasで描画領域の確保

<canvas></canvas>

グラフの設定の仕方

各コードの埋め込み場所は、ページ下部のソースコード参照

グラフのタイプ

var type = ???? ;

折れ線グラフ：line

縦棒グラフ：bar

横棒グラフ：horizontalbar

オプションの設定

グラフの線の色：borderColor : "rgba(255, 127, 127, 1.0)"

グラフの中の色：backgroundColor : "rgba(255, 127, 127, 0.3)"

線の太さ：borderWidth : 2

なめらかな線or直線：デフォルトはなめらかな線、直線はlineTension : 0

背景の色をなしに設定：fill : false

折れ線グラフのポイントの形の設定：pointStyle : "rect"

軸の設定

良しなに軸の最大値を設定：suggestedMax : 1000

良しなに軸の最小値を設定：suggestedMin : 0

グリッド線の感覚： stepSize : 100

軸に文字を追加：
callback : function(value, index, values){
return value + "JPY";
}

タイトルの設定：

title : {
display : true,
text : "test",

凡例の設定

legend : {
position : "right",
// display : false,
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>chart.js</title>
</head>
<body>

	<!-- 描画領域の指定 -->
	<canvas id="my_chart">
		Canvas Not Supported...
	</canvas>

	<!-- CDNでchart.jsを読み込む -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
	
	<script>
		// JavaScriptは即時関数で実行
		(function() {
			"use strict";

			// グラフのタイプを指定
			// var type = "line";
			// var type = "bar";
			var type = "horizontalbar";

			// データを設定
			var data = {
				// x軸
				labels : [2010, 2011, 2012, 2013],
				
				// y軸
				datasets : [

				// データセット１つめ
				{
				
					label : "@doz",
					data : [520, 300, 200, 210],
					borderColor : "rgba(255, 127, 127, 1.0)",
					backgroundColor : "rgba(255, 127, 127, 0.3)",
					borderWidth : 2,
					// lineTension : 0,
					// fill : false,
					// pointStyle : "rect"

				},

				// データセット２つめ
				{
					label : "@hatena",
					data : [330, 230, 400, 360],
					borderColor : "rgba(127, 127, 255, 1.0)",
					backgroundColor : "rgba(127, 127, 255, 0.3)",
					borderWidth : 2,
				}

				]
			};

			// グラフのオプションを設定
			var options = {

				// 軸の設定
				scales : {

					// ↓軸の最大値と最小値をハードコーディング
					// yAxes : [{ ticks : { min : 0, max : 400 } }]
					
					// 軸の最大値と最小値を自動で設定
					yAxes : [{ ticks : { suggestedMin : 0,
										suggestedMax : 400 ,
										stepSize : 100,
										callback : function(value, index, values){
											return value + "JPY";
										}
									}
							}]
				},

				// タイトルの設定
				title : {
					display : true,
					text : "test",

				},

				// 凡例の設定
				legend : {
					position : "right",
					// display : false,
				}
			};

			// グラフを描画する領域を取得
			var ctx = document.getElementById("my_chart").getContext("2d");

			// chart.jsの継承
			var myChart = new Chart(ctx, {
				type:type,
				data:data,
				options:options
			})
		})();
	</script>
</body>
</html>