Question

是否可以在chart.js中的两点之间设置特定部分的线条颜色？

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

以下是我作为data对象中的options属性传递的内容，用于初始化图表：

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

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

Answer 1

嗨，迈克尔·赫尔利，我想您应该使用：

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

或

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

我的想法是，我们有3个具有多种颜色的数据集，数据集1的末尾是数据集2的第一个。

这是我的示例：

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>

Answer 2

Plugin Core API提供了一系列可用于执行自定义代码的挂钩。您可以使用afterLayout钩子通过CanvasRenderingContext2D.createLinearGradient()创建线性渐变。

在下面的示例中，线性渐变是根据data.dataset.colors中定义的颜色创建的。

new Chart('myChart', {
  type: 'line',
  plugins: [{
    afterLayout: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var gradientStroke = ctx.createLinearGradient(xAxis.left, 0, xAxis.right, 0);
      var dataset = chart.data.datasets[0];
      dataset.colors.forEach((c, i) => {
        var stop = 1 / (dataset.colors.length - 1) * i;
        gradientStroke.addColorStop(stop, dataset.colors[i]);
      });
      dataset.backgroundColor = gradientStroke;
      dataset.borderColor = gradientStroke;
      dataset.pointBorderColor = gradientStroke;
      dataset.pointBackgroundColor = gradientStroke;
      dataset.pointHoverBorderColor = gradientStroke;
      dataset.pointHoverBackgroundColor = gradientStroke;
    }
  }],
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
    datasets: [{
      label: 'My Dataset',
      data: [101, 122, 103, 115, 95, 94, 100, 108, 112, 115, 119, 120, 109, 108, 105, 116, 117, 108, 109, 114],
      fill: false,
      colors: ['gray', 'gray', 'gray', 'gray','gray', 'gray', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue']
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="70"></canvas>

Answer 3

最新版本的 ChartJS 允许您单独自定义线段，可用于更改特定线段的颜色和样式（虚线等）。

const config = {
  type: 'line',
  data: {
    labels: Utils.months({count: 7}),
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, NaN, 48, 56, 57, 40],
      borderColor: 'rgb(75, 192, 192)',
      segment: {
        borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
        borderDash: ctx => skipped(ctx, [6, 6]),
      }
    }]
  },
  options: genericOptions
};

有关详细信息，请参阅 https://www.chartjs.org/docs/master/samples/line/segments.html。

Chartjs两点之间的线条颜色

3 个答案: