Chart.jsの使い方メモ

アクセス解析のチャート作成で利用したライブラリ「Chart.js」の使い方をメモとして残しておきます。

公式サイトや日本語のドキュメントなど。

• Chart.js | Open source HTML5 Charts for your website
• 人気の拡張 · Chart.js 日本語ドキュメント

以下のサイトでChart.jsを使用しているので、どんな感じなのかイメージを掴みたい場合は確認してみてください。

OAR Analytics 2019

CDNで利用する場合の外部スクリプト参照。

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

barタイプのチャートを表示する簡単な例は以下の通り。

<canvas id="barChart"></canvas>

<script>
  var barChart = new Chart(
    document.getElementById('barChart').getContext('2d'), 
    {
      type: 'bar',
      data: {
          labels: ['Jan', 'Feb', 'Mar', 'Apr'],
          datasets: [{
            label: '新規訪問者',
            backgroundColor: '#4bc0c0',
            borderWidth: 0,
            data: [111, 222, 333, 444]
          }]
      },
      options: {}
  });
</script>

以下、よく利用する使い方や設定になります。

1列に2種類のグラフを表示する場合（「datasets」の配列に複数のデータ登録）。

var barChart = new Chart(
  document.getElementById('barChart').getContext('2d'), 
  {
    type: 'bar',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr'],
        datasets: [{
          label: '新規訪問者',
          backgroundColor: '#4bc0c0',
          borderWidth: 0,
          data: [111, 222, 333, 444]
        },
        {
          label: 'リピーター',
          backgroundColor: '#ff6384',
          borderWidth: 0,
          data: [11, 22, 33, 44]
        }]
    },
    options: {}
});

時々、グラフ上部に表示されるラベルが不要な場合があるので非表示にする場合。

var barChart = new Chart(
  document.getElementById('barChart').getContext('2d'), 
  {
    ...
    options: {
      legend: {
        display: false
      }
    }
});

デフォルトでは自動でグラフの開始値が決められてしまうので0スタートにしたい場合。

var barChart = new Chart(
  document.getElementById('barChart').getContext('2d'), 
  {
    ...
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
});

データの上限値を自分で指定したい場合。

var barChart = new Chart(
  document.getElementById('barChart').getContext('2d'), 
  {
    ...
    options: {
      scales: {
        yAxes: [{
          ticks: {
            suggestedMax: 600
          }
        }]
      }
    }
});

グリッド線のスタイル変更（点線にしたり色の変更など）。

var barChart = new Chart(
  document.getElementById('barChart').getContext('2d'), 
  {
    ...
    options: {
      scales: {
        yAxes: [{
          gridLines: {
            borderDash: [2, 1],
            color: "#888"
          }
        }]
      }
    }
});

非表示にしたい場合は以下のように設定（線を透明にしている）。

gridLines: {
  color: "rgba(0, 0, 0, 0)"
}

pieタイプのチャートの簡単な例。

<canvas id="pieChart"></canvas>

<script>
  var pieChart = new Chart(
    document.getElementById('pieChart').getContext('2d'), 
    {
      type: 'pie',
      data: {
        labels: ['新規', 'リピーター'],
        datasets: [{
          data: [308179, 37278],
          borderWidth: 1,
          borderColor: "#aaa",
          backgroundColor: ['#36a2eb', '#ff6384']
        }]
      },
      options: {}
  });
</script>

デフォルトではチャート内にパーセンテージを表示することができないので、こういった場合はプラグインを利用。

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

チャート内で表示したい文字列を「options」で指定。

var pieChart = new Chart(
  document.getElementById('pieChart').getContext('2d'), 
  {
    ...
    options: {
      plugins: {
        datalabels: {
          formatter: (value, ctx) => {
            let sum = 0;
            let dataArr = ctx.chart.data.datasets[0].data;
            dataArr.map(data => {
                sum += data;
            });
            let percentage = (value*100 / sum).toFixed(2)+"%";
            return percentage;
          },
          color: '#fff',
          font:{
            size:11
          }
        }
      }
    }
});

パーセンテージが重なって表示されるなど、割合が少ない一部のデータのみ表示したくないといった場合は以下のようにする。

var pieChart = new Chart(
  document.getElementById('pieChart').getContext('2d'), 
  {
    ...
    options: {
      plugins: {
        datalabels: {
          ...
          display: function(ctx) {
            return ctx.dataIndex <= 2;
          }
        }
      }
    }
});