chart.js使ってみた

chart.jsとは

グラフ（折れ線グラフ、棒グラフ、レーダチャートなど）描画用のライブラリ。

ダウンロード：http://www.chartjs.org

ドキュメント：http://www.chartjs.org/docs

日本語ドキュメント：https://misc.0o0o.org/chartjs-doc-ja/

インストール

npm install chart.js --save

使い方

<canvas id="myChart" width="400" height="400"></canvas>

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar', // チャートのタイプ(棒グラフを指定)
data: {
　　labels: ["X軸タイトル１", "X軸タイトル２", "X軸タイトル３", "X軸タイトル４", "X軸タイトル５", "X軸タイトル６"],
　　datasets: [{
　　label: 'Y軸タイトル',
　　data: [12, 19, 3, 5, 2, 3],  // グラフにするデータ
　　backgroundColor: [　// グラフの背景色(dataのインデックスに対応)
　　　　'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: [　　// グラフの線の色(dataのインデックスに対応)
　　　　'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: {
　　　　　　　　　　　max: 100　// Y軸の最大値指定
　　　　　　　　　　　min: 0　// Y軸の最小値指定
　　　　　　　　　　}
　　　　　　}]
　　　　}
　　}
});

チャートのデータ更新

function updateDatasets(chart, data, datasetIndex) {
// datasetsのインデックス指定して代入
 chart.data.datasets[datasetIndex].data = data;
// 最後にチャートの更新を呼ぶ
 chart.update();
}

チャートのオプション更新

function updateOption(chart, someValue) {
// 更新したいプロパティに値を代入
 chart.options.scales.yAxes[0].ticks.min = someValue;
// 最後にチャートの更新を呼ぶ
 myChart.update();
}

グローバル設定

// チャートのフォントの色 
Chart.defaults.global.defaultFontColor = 'white';
// チャートのフォントのサイズ
Chart.defaults.global.defaultFontSize = 15;

オプション

    options: {
        responsive: true,　// レスポンシブ
        maintainAspectRatio: false,　// 画面サイズに合わせて縦横比を変更
        hoverMode: 'index',
        spanGaps: false,　// trueでnullデータ補完
        animation: {　　　// アニメーションの設定
          duration: 500
        },
        legend: {
          display: false,　// 凡例を消す
        },
        title: {　// タイトルの設定
          display: false,
        },
        gridLines: {　// グリッド線の設定
          display: false,
          color: 'rgba(255,255,255,0.3)',
        },
        scales: {
          yAxes: [　// Y軸の設定
            {
              type: 'linear',　// チャートの種類
              display: true,
              position: 'left',　// Y軸の位置(左右)
              id: 'y-axis-1',　// Y軸のID
              scaleLabel: {　　// Y軸ラベルの設定
                display: true,
                labelString: '非表示',
                fontSize: 16,
                fontColor: '#ffffff'
              },
              ticks: {　// 目盛の設定
                min: 0,　　// Y軸の最大値
                max: 100,　// Y軸の最小値
                beginAtZero: true　　
              },
              gridLines: {
                drawOnChartArea: false,　// 目盛りを消す
                color: '#6a6a6a',
              },
            },
            {
              type: 'linear',
              display: true,
              position: 'right',
              id: 'y-axis-2',
              borderDash: [5, 5],
              scaleLabel: {
                display: true,
                labelString: '非表示',
                fontSize: 16,
                fontColor: '#ffffff'
              },
              ticks: {　// 目盛の設定
                min: 0,
                max: 100,
                beginAtZero: true
              },
              gridLines: {
                // drawOnChartArea: false,　// 目盛りを消す
                color: '#6a6a6a',
              },
            }
          ],
          xAxes: [　　　// X軸の設定
            {
              display: true,
              type: 'time',
              time: {
                unit: 'minute',
                displayFormats: {
                  'minute': 'MM:DD HH:mm', // X軸の数値のフォーマット
                }
              },
              gridLines: {
                color: '#6a6a6a',
              },
              ticks: {　// 目盛の設定
                autoSkip: true,
                maxRotation: 45,　// X軸に表示するテキストの角度
                source: 'auto',
                beginAtZero: true,
                callback: function (value, index, values) {
                  // X軸に表示する値を返す
                  return value;
                }
              },
            }
          ]
        },
        tooltips: {　　// ポイントにカーソルを当てた時に表示するツールチップの設定
          custom: function (tooltipModel) {
            if (tooltipModel.dataPoints && String(tooltipModel.dataPoints[0].yLabel).length > 8) {
              tooltipModel.opacity = 0;
            }
            return tooltipModel;
          },
          callbacks: {
            title: function (tooltipItems, data) {
　 　　　　　　　　　　　　　　　　　　　　　　　　// タイトルのコールバック
            },
            label: function (tooltipItem, data) {
  　 　　　　　　　　　　　　　　　　　　　// ラベルのコールバック
            },
          }
        },
        hover: {　　// 　マウスオーバーの設定
          mode: 'nearest'
        },
      },

使ってみた感想

チャートの設定が豊富でとても使いやすいライブラリだと思いました。

optionsなどを駆使すれば自分なりのアレンジもできると思います。