Chart.jsを使い倒したいので調査

2018/12/13

以前に「ccchart」の記事を書いたのですが、同じぐらい良くできていると話を聞く「Chart.js」を使ってみたくなったので、効率的に使えるためにいろいろと調査したいと思います。以前の記事 [Javascript] グラフ表示ライブラリは「ccchart」が便利

chart.jsについて

公式サイト : https://www.chartjs.org/ ライセンス : The MIT License (MIT) コピーライト : Copyright (c) 2018 Chart.js Contributors 特徴 : 非常に軽量で、インストールも操作習得もかなり簡単なので、作業効率化の為に「使わな損」的なツールだそうです。日本語リファレンス : https://misc.0o0o.org/chartjs-doc-ja/

インストール

npmやbowerでのインストール方法がgithubサイトに記述されていますが、WEBページでサクッと使いたい場合は、以下の方法でダウンロードするといいでしょう。 1. Githubからzipデータ（プログラムファイル群)をダウンロード https://github.com/chartjs/Chart.js/archive/master.zip 2. root階層にdistフォルダを作成（基本エンジン）ここに、「Chart.js」(Chart.min.js)と「Chart.bundle.js」(Chart.bundle.min.js)をダウンロード Chart.js Chart.min.js Chart.bundle.js Chart.bundle.min.js インストールはこれで完了です。 githubで落としてきたファイルの中にある「samples」のhtmlファイルをブラウザで開くとそれぞれのグラフサンプルを見ることができます。

HTML記述して簡単グラフ表示

実際にHTMLファイルにどういう風に記述してグラフ表示できるかを簡単に行ってみます。

<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="utf-8">
	<script src="Chart.js/dist/Chart.js"></script>
	<title>Chart.js samples</title>
</head>
<body>

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["赤", "青", "黄色", "緑", "紫", "橙"],
        datasets: [{
            label: '得票数',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>
	
</body>
</html>

リファレンスページに書かれてあるコードをそのまま使ってみましたが非常に簡単にグラフ表示できることがわかります。グラフ表示の起動コマンドは以下の構成になっています。

new Chart(
  %対象canvasエレメント,
  {
    type : グラフタイプ(sampleは「bar」),
    data : {
      labels : グラフデータ別の色設定,
      datasets : [
        {
          label : グラフデータ名称,
          data  : 数値データ,
          backgroundColor : barの背景色,
          borderColor : barのボーダー色、lineカラー,
          borderWidth : ボーダー幅
        }
      ]
    },
    options : {
      いろいろなオプション設定ができます・・・
    }
  }
);

少し手抜き気味に設定できる項目を説明してみました。シンプルですね。dataの箇所をcgiと連動したりajax連動することで動的なグラフを作ることができそうです。