값에 따라 막대 색상 변경

Question

각도 2 앱에 대해 chart-js/ng2-charts를 사용하고 있습니다.

막대 그래프를 표시 할 수 있지만 현재 모든 막대는 같은 색입니다. 값에 따라 다른 색상을 사용하고 싶습니다.

할 수 있습니까?

Answer 1

차트를 만든 후에는 다음 함수를 사용하여 데이터 집합을 반복하고 데이터 값에 따라 색을 변경할 수 있습니다.

이 예에서 값이 50 이상이면 색이 빨간색으로 바뀝니다.

var colorChangeValue = 50; //set this to whatever is the deciding color change value 
var dataset = myChart.data.datasets[0]; 
for (var i = 0; i < dataset.data.length; i++) { 
    if (dataset.data[i] > colorChangeValue) { 
    dataset.backgroundColor[i] = chartColors.red; 
    } 
} 
myChart.update(); 

JSFiddle 데모 : https://jsfiddle.net/6d0jsyxu/1/