图表JS根据数据值改变pointBackgroundColor答案

【问题标题】：Chart JS change pointBackgroundColor based on data value图表JS根据数据值改变pointBackgroundColor
【发布时间】：2018-11-11 01:53:30
【问题描述】：

所以我使用 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
		}
		
		}]
	}
	}
});

【问题讨论】：

也许这可以帮助stackoverflow.com/questions/37144864/…

标签： colors background chart.js point linechart

【解决方案1】：

您可以在任何选项上使用闭包并根据上下文操作返回的值。在下面的示例中，当当前值大于 0 时，pointBackgroundColor 为红色，否则为蓝色。

pointBackgroundColor: function (context) {
  let value = context.dataset.data[context.dataIndex];

  return value > 0
    ? 'red'
    : 'blue';
},

【讨论】：

【解决方案2】：

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

来自Tot Zam的原始答案添加代码示例以防链接失效。

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();

它关于条形背景，但您可以尝试解决并找到相同的解决方案。

【讨论】：