Диаграмма изменения JS pointBackgroundColor на основе значения данных - PullRequest
Новая
       33

Диаграмма изменения JS pointBackgroundColor на основе значения данных

0 голосов
/ 01 июня 2018

Итак, я создал базовую линейную диаграмму, используя 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
		}
		
		}]
	}
	}
});
...