【サンプルあり】Chart.jsの使い方を説明します

JavaScript

グラフを書くためのjsライブラリはたくさんありますが、シンプルなグラフでいい場合は手軽で簡単なChart.jsというライブラリがあります。

今回はChart.jsの使い方を説明していきます。

スポンサーリンク

Chart.jsの使い方

Chart.jsのインストール

Chart.jsのライブラリのインストールは非常に簡単です。
まず以下のコードを挿入し、CDNを利用します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

CDNの使用を推奨する理由は、立ち上げが簡単で動作も速いためです。

それではサンプルを見ながら使い方を説明していきます。

Chart.jsのスクリプトの書き方

以下のサンプルスクリプトを解説していきます。

<canvas id="myBarChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
		<script>
		  var ctx = document.getElementById("myBarChart");
		  var myBarChart = new Chart(ctx, {
		    type: 'bar',
		    data: {
		      labels: ['4月1日', '4月2日', '4月3日', '4月4日', '4月5日', '4月6日', '4月7日'],
		      datasets: [
		        {
		          label: 'Aパークの来場者数',
		          data: [6200, 6500, 9300, 8500, 5100, 6600, 4700],
		          backgroundColor: "rgba(255,153,0,0.4)"
		        },
		        {
		          label: 'Bパークの来場者数',
		          data: [7800, 9200, 6400, 7000, 4500, 8200, 6700],
		          backgroundColor: "rgba(179,11,198,0.4)"
		        }
		      ]
		    },
		    options: {
		      title: {
		        display: true,
		        text: 'テーマパーク別 来場者数'
		      },
		      scales: {
		        yAxes: [{
		          ticks: {
		            suggestedMax: 10000,
		            suggestedMin: 0,
		            stepSize: 2000,
		          }
		        }]
		      },
		    }
		  });
		</script>

このスクリプトを実行すると以下のようなグラフが描かれます。

サンプルスクリプトの実行結果のグラフ

それではサンプルスクリプトを区切って解説していきます。

<canvas id="myBarChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

canvasは描画部分になります。ここにグラフの情報とオプションを渡すことでグラフが描画されます。

scriptで囲まれた部分は先ほども説明しましたが、Chart.jsを利用するためにライブラリを読み込んでいる部分です。

var ctx = document.getElementById("myBarChart");
		  var myBarChart = new Chart(ctx, {
		    type: 'bar',

1行目はcanvas要素に参照するためのものです。
2行目はチャートオブジェクトを生成しています。
3行目はグラフのタイプを決定しています。ここでは‘bar’なので、棒グラフになります。

data: {
		      labels: ['4月1日', '4月2日', '4月3日', '4月4日', '4月5日', '4月6日', '4月7日'],
		      datasets: [
		        {
		          label: 'Aパークの来場者数',
		          data: [6200, 6500, 9300, 8500, 5100, 6600, 4700],
		          backgroundColor: "rgba(255,153,0,0.4)"
		        }

data以下にチャートに使われる情報を書き込んでいきます。
複数の情報を渡す場合はdatasetsの中に{}で区切って書き込んでください。

options: {
		      title: {
		        display: true,
		        text: 'テーマパーク別 来場者数'
		      },
		      scales: {
		        yAxes: [{
		          ticks: {
		            suggestedMax: 10000,
		            suggestedMin: 0,
		            stepSize: 2000,

displayをtrueにするとtextに挿入した文章がタイトルとして表示されます。

ticksの中の説明は以下になります。

  • suggestedMax:縦軸の最大値
  • suggestedMin: 縦軸の最小値
  • stepSize:目盛りを表示させる間隔

今回は以上です。最後まで見てくださってありがとうございました。

タイトルとURLをコピーしました