【Chart.js】折れ線グラフ内にある任意のマーカーの色を変更する

f:id:Satoh_D:20161125172812p:plain

Chart.jsで折れ線グラフを作成しているときに、
特定のマーカーの色を変更したく、方法を調べたのでメモしておきます。

しきい値を下回った時に色を変えたい、みたいな際に使えるかな、と。

今回利用するコード

今回使うコードは下記のような感じです。
点数の折れ線グラフと、しきい値のグラフをそれぞれ表示させておきます。

グラフの任意の場所のマーカーの色を変更する

作成したグラフのうち、しきい値を下回ったマーカーの色を変更します。
Chart.jsでのマーカーの色指定は文字列だけでなく、配列も利用できるのでこれを使います。

まずは背景色用の配列を返す関数を作成します。

/**
 * マーカーの背景色用配列の作成
 * @param points      点数用配列
 * @param borderPoint しきい値
 * @param safeColor   マーカーの背景色(通常時)
 * @param outColor    マーカーの背景色(異常時)
 */
function generatePointBgcolor(points, borderPoint, safeColor, outColor) {
  var bgColors = [];

  for(var i = 0, len = points.length; i < len; i++) {
    if(points[i] > borderPoint) {
      bgColors.push(safeColor);
    } else {
      bgColors.push(outColor);
    }
  }

  return bgColors;
}

次に背景色用の配列を受け取る変数を作成し、
chartOptions.data.datasets[0].pointBackgroundColor に格納します。

var pointBgcolors = generatePointBgcolor(points, 28, 'rgba(0, 178, 108, 1.0)', 'rgba(255, 0, 0, 1.0)');
...
var chartOptions = {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5],
    datasets: [{
      label: '点数',
      data: points,
      borderColor: 'rgba(204, 204, 204, 0.7)',
      pointBackgroundColor: pointBgcolors,
      fill: false
    }, {
      label: 'しきい値',
      data: borderPoints,
      borderColor: 'rgba(255, 9, 232, 1)',
      borderWidth: 1,
      pointRadius: 0,
      pointHoverRadius: 0,
      fill: false,
    }]
  }
}

コードの全景と出来上がりのグラフは以下の通り。

これでしきい値を下回ったマーカーの色が変わるようになりました。
元々 pointBackgroundColor には文字列しか使えないと思いこんでいたのでかなりハマっていました...
ドキュメントをちゃんと見てみると普通に配列が使えることが書かれていて...orz
ちゃんとドキュメントは見るべきでしたね...反省。