Chartjs两点之间的线条颜色 [英] Chartjs Line Color Between Two Points

问题描述

有什么方法可以设置chart.js中两点之间特定部分的线条颜色吗？

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

这是我作为选项 data 属性传递的内容c $ c>对象来初始化图表：

  var chartData = {
标签：[/ *一维字符串数组* /]，
数据集：[
 {
标签：，
数据：[/ *总计的一维数组* /]，
 fill：假，
 backgroundColor：'＃e7eaeb'，
 borderColor：红色
} 
] 
}; 
  

我认为这是我需要添加图形截面点和颜色的地方，但我不知道

解决方案

HI Michael Hurley我认为您应该使用：

插值：
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的第一个。

这里是我的示例：

< pre class = snippet-code-js lang- js prettyprint-override> window.chartColors = {红色：'rgb（255，99，132）'，橙色：'rgb（255，159，64）'，黄色：'rgb（255， 205、86）'，绿色：'rgb（75、192、192）'，蓝色：'rgb（54、162、235）'，紫色：'rgb（153、102、255）'，灰色：'rgb（ 201，203，207）'}; var randomScalingFactor = function（）{return Math.round（Math.random（）* 100）; }; var config = {类型：行，数据：{标签：['0'，'1'，'2'，'3'，'4'，'5'，'6'，'7'，'8 '，'9'，'10'，'11'，'12']，数据集：[{标签：三次插值（单调），数据：[0、20、20、60、60，NaN，NaN， NaN，NaN，NaN，NaN，NaN，NaN]，borderColor：window.chartColors.red，backgroundColor：'rgba（0，0，0，0）'，填充：false，cubicInterpolationMode：'monotone'}，{标签： 三次插值（默认），数据：[NaN，NaN，NaN，NaN，60、120、140、180、120，NaN，NaN，NaN，NaN]，borderColor：window.chartColors.blue，backgroundColor：'rgba （0，0，0，0）'，填充：false，}，{标签：线性插值，数据：[NaN，NaN，NaN，NaN，NaN，NaN，NaN，NaN，120、125、105， 110，170]，borderColor：window.chartColors.green，backgroundColor：'rgba（0，0，0，0）'，填充：false，lineTension：0}]}，选项：{响应：true，标题：{显示：true，文本： Chart.js折线图-三次插值模式}，工具提示：{模式：'索引'}，比例尺：{xAxes：[{display：true，scaleLabel：{display：true}}]]，yAxes：[{display：true，scaleLabel：{display：true，labelString：'Value '}，滴答：{建议最小值：-10，建议最大值：200，}}}}}}； var ctx = document.getElementById（'canvas'）。getContext（'2d'）; window.myLine = new Chart（ctx，config）;

  canvas {-moz-user-select：无； -webkit-user-select：无； -ms-user-select：无； }  

 < 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>  

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

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

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.

解决方案

HI Michael Hurley I think you should use:

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

or

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

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

Here my Example:

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>

这篇关于Chartjs两点之间的线条颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！