Chart.js 값이 양수인지 음수인지 판단하여 그래프 색상 변경

데모

htps : // 코데펜. 이오 / 카쿠타 _ 유 / 펜 / R 와요 xj
※CodePen으로 전환합니다.

모든 코드

HTML

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

자바스크립트

// 値を設定
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'] // 配列にしておく必要がある
  }
]

값 결정 및 색상 설정

값의 수만큼 루프를 돌려 색상을 설정합니다.
예를 들어 세 번째 값이 음수이면 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
  },
});