Blog

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軸タイトル1", "X軸タイトル2", "X軸タイトル3", "X軸タイトル4", "X軸タイトル5", "X軸タイトル6"],
  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などを駆使すれば自分なりのアレンジもできると思います。