Chart.js 値が正か負か判定し、グラフ色を変える

##デモ

https://codepen.io/kakuta_yu/pen/RwayOxj
※CodePenに遷移します

##全コード

###HTML

<canvas id="myChart"></canvas>

###JavaScript

// 値を設定
var datasets = [
  {
    label: '利益額',
    data: [-960, -640, -220, 30, -80, 300, 660],
    backgroundColor: ['#3F88C5'] // 配列にしておく必要がある
  }
]

// 各棒グラフの値が正か負かによって色分け
for (var i = 0; i < datasets[0].data.length; i++) {
  if (datasets[0].data[i] > 0) {
    datasets[0].backgroundColor[i] = '#3F88C5' // 値が正の場合は青
  } else {
    datasets[0].backgroundColor[i] = '#FF5E5B' // 値が負の場合は赤
  }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  グラフ描画
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['2014年', '2015年', '2016年', '2017年', '2018年', '2019年', '2020年'],
    datasets: datasets
  },
});

##解説

###値を設定
描画する値を変数に入れます。
この時、backgroundColorを配列の形にしておくことを忘れないでください。
あとで値を判定してbackgroundColorに青と赤のカラーコードを入れていきますが、配列にしておかないとうまく入ってくれません。

// 値を設定
var datasets = [
  {
    label: '利益額',
    data: [-960, -640, -220, 30, -80, 300, 660],
    backgroundColor: ['#3F88C5'] // 配列にしておく必要がある
  }
]

###値の判定と色の設定
値の数だけループを回して色を設定します。
例えば3つ目の値が負だった時、backgroundColor[2]に赤のカラーコードを入れます。

// 各棒グラフの値が正か負かによって色分け
for (var i = 0; i < datasets[0].data.length; i++) {
  if (datasets[0].data[i] > 0) {
    datasets[0].backgroundColor[i] = '#3F88C5' // 値が正の場合は青
  } else {
    datasets[0].backgroundColor[i] = '#FF5E5B' // 値が負の場合は赤
  }
}

###グラフの描画
上記で設定したdatasetsをグラフ描画コードへ入れます。
今回は最低限のコードしか記述していないため、デモでは凡例の色が赤になっていますが、このあたりはoptionで凡例を非表示にといった処理が必要です。

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  グラフ描画
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['2014年', '2015年', '2016年', '2017年', '2018年', '2019年', '2020年'],
    datasets: datasets
  },
});