問題 × 解決策

グラフを生成するjQueryライブラリ「Chart.js」

問題

グラフを、データを元に動的に生成したい。

解決策

jQueryライブラリ「Chart.js」を使う。

 

データを元に、グラフを動的に生成する

グラフをたくさん載せる際、ソフトでグラフを一つずつ作って画像に書き出す手間がどうしてもありますが、jQueryライブラリ「Chart.js」を使うことで、グラフを動的に生成することができます。
今回は「Chart.js」の実装方法をご紹介します。

DEMOはこちら

必要なファイルの読み込み

まず、準備として、下記ファイルを読み込みます。
今回はCDNJSのバンドル版を読み込む例になります。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>

「Chart.js」の読み込み方法については、下記をご参照ください。
インストール · Chart.js 日本語ドキュメント

HTMLはこちら

canvasタグを配置します。

<canvas id="chart01"></canvas>

CSSはこちら

#chart01{
	width: 100%;
	height: 300px;
}

設定、実行するjavascriptはこちら

要素.document.getElementById(“chart01”).getContext(‘2d’)」+「new Chart()」で実行します。

  1. type:棒グラフや折れ線グラフ等、グラフの種類を設定します。
  2. data:グラフのデータを設定します。
  3. options:グラフのオプションを設定します。
var ctx = document.getElementById("chart01").getContext('2d');
var myChart = new Chart(ctx, {
	type: 'bar',
	data: {
		labels: ["Aさん", "Bさん", "Cさん", "Dさん"],
		datasets: [{
			label: '得点',
			data: [40, 20, 70, 60],
			backgroundColor: [
				'rgba(255, 99, 132, 0.4)',
				'rgba(54, 162, 235, 0.4)',
				'rgba(255, 206, 86, 0.4)',
				'rgba(75, 192, 192, 0.4)'
			],
			borderColor: [
				'rgba(255,99,132,1)',
				'rgba(54, 162, 235, 1)',
				'rgba(255, 206, 86, 1)',
				'rgba(75, 192, 192, 1)'
			],
			borderWidth: 1
		}]
	},
	options: {
		scales: {
			yAxes: [{
				ticks: {
					beginAtZero:true,
					max: 100
				}
			}]
		}
	}
});

ポイント!

  1. グラフのラベルを設定するには、datalabels[ラベル名, ラベル名, ラベル名, ラベル名] と記述します。
  2. グラフのラベルのデータを設定するには、datadatasetsの中に記述します。
    以下が設定できる項目の一例です。

    label グラフのデータの凡例
    data グラフの各ラベルのデータ
    backgroundColor グラフの各ラベルのバーの背景色
    borderColor グラフの各ラベルのバーの枠線の色
    borderWidth グラフのバーの枠線の太さ

ここに注意!

datasetsでの各ラベルの設定の際は、dataのlabelsに設定したラベル数を遵守する必要があります。

参照

以下のサイトが、より詳しく解説してくれています。

【Chart.js · Chart.js 日本語ドキュメント】
https://misc.0o0o.org/chartjs-doc-ja/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

five × 2 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧