基于数据值的图表JS更改pointBackgroundColor

Question

因此，我已经使用Chartjs创建了基本折线图。如何根据数据值更改点的颜色（pointBackgroundColor）？例如，如果数据点小于10，则变为红色，或者如果数据点在10至20之间，则变为蓝色？

const CHART = document.getElementById("lineChart");		
let lineChart = new Chart(CHART, {
	type: 'line',
	data: {
		labels: ["5/10/2010", "5/11/2010", "5/12/2010", "5/13/2010", "5/14/2010", "5/15/2010", "5/16/2010"],
		datasets: [
		{
			label: "Theta",
			fill: false,
			lineTension: 0,
			backgroundColor: "rgba(75,192,192,0.4)",
			borderColor: "rgba(9,31,62)",
			borderCapStyle: 'butt',
			borderDash: [],
			borderDashOffset: 0.0,
			borderJoinStyle: 'miter',
			pointBorderColor: "rgba(0,191,255)",
			pointBackgroundColor: "rgba(0,191,255)",
			pointBorderWidth: 5,
			pointBorderRadius: 5,
			pointHoverBackgroundColor: "rgba(75,192,192,1)",
			pointHoverBorderColor: "rgba(220,220,220,1)",
			pointHoverBorderWidth: 2,
			pointRadius: 1,
			pointHitRadius: 10,
			data: [15, 28, 11, 3, 34, 65, 20],
		}
	]
},
	options: {
	maintainAspectRatio: false,
	responsive: true,
	legend: {
		display: false,
	},
	scales: {
		yAxes:[{
		ticks: {
			fontColor: "#091F3e",
			beginAtZero: true,
			steps: 10,
			stepSize: 10,
			max: 100
			},
		gridLines: {
			display: false
		}
		
		}],
	xAxes:[{
		ticks: {
			fontColor: "#091F3e",
			fontSize: "10",
			},
		gridLines: {
			display: false
		}
		
		}]
	}
	}
});

Answer 1

这里还有另一件事可以帮助您Change bar color depending on value。

var colorChangeValue = 50; //set this to whatever is the decidingcolor 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();

它与酒吧背景有关，但是您可以尝试变通并找到相同的解决方案。