两点之间的Chartjs线条颜色

2022-01-22 00:00:00 canvas javascript chart.js

有没有办法在chart.js的两点之间设置特定部分的线条颜色?

Is there any way to set line color of specific sections in between two points in chart.js?

我想将部分 00-07 涂成灰色，07-15 红色和 15-23 蓝色.

I would like to color the section 00-07 gray, 07-15 red, and 15-23 blue.

这是我作为 options 对象中的 data 属性传递来初始化图表的内容:

Here is what I am passing as the data attribute in the options object to initialize the chart:

var chartData = {
labels: [/* a single dimensional array of strings */],
datasets: [
    {
        label: '',
        data: [/* a single dimensional array of totals */],
        fill: false,
        backgroundColor: '#e7eaeb',
        borderColor: red
    }
  ]
};

我认为这是我需要添加图形部分点和颜色的地方，但我不知道如何.

I think this is where I need to add the graph section points and colors, but I do not know how.

推荐答案

你好 Michael Hurley 我认为你应该使用:

HI Michael Hurley I think you should use:

插值:http://www.chartjs.org/samples/latest/charts/line/interpolation-modes.html

或

多轴:http://www.chartjs.org/samples/latest/charts/line/multi-axis.html

我的想法是我们有 3 个多色数据集，dataset1 的结尾是 dataset2 的第一个.

My idea is we have 3 datasets with multi-color, End of dataset1 is first of dataset2.

这是我的例子:

window.chartColors = { 	red: 'rgb(255, 99, 132)', 	orange: 'rgb(255, 159, 64)', 	yellow: 'rgb(255, 205, 86)', 	green: 'rgb(75, 192, 192)', 	blue: 'rgb(54, 162, 235)', 	purple: 'rgb(153, 102, 255)', 	grey: 'rgb(201, 203, 207)' }; 

var randomScalingFactor = function() {
			return Math.round(Math.random() * 100);
		};

		var config = {
			type: 'line',
			data: {
				labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
				datasets: [{
					label: 'Cubic interpolation (monotone)',
					data: [0, 20, 20, 60, 60, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN],
					borderColor: window.chartColors.red,
					backgroundColor: 'rgba(0, 0, 0, 0)',
					fill: false,
					cubicInterpolationMode: 'monotone'
				}, {
					label: 'Cubic interpolation (default)',
					data: [NaN, NaN, NaN, NaN, 60, 120, 140, 180, 120, NaN, NaN, NaN, NaN],
					borderColor: window.chartColors.blue,
					backgroundColor: 'rgba(0, 0, 0, 0)',
					fill: false,
				}, {
					label: 'Linear interpolation',
					data: [NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, 120, 125, 105, 110, 170],
					borderColor: window.chartColors.green,
					backgroundColor: 'rgba(0, 0, 0, 0)',
					fill: false,
					lineTension: 0
				}]
			},
			options: {
				responsive: true,
				title: {
					display: true,
					text: 'Chart.js Line Chart - Cubic interpolation mode'
				},
				tooltips: {
					mode: 'index'
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Value'
						},
						ticks: {
							suggestedMin: -10,
							suggestedMax: 200,
						}
					}]
				}
			}
		};

	
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myLine = new Chart(ctx, config);

canvas {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:75%;">
		<canvas id="canvas"></canvas>
	</div>

相关文章