Chart.js-在折线图中为背景的特定部分上色 [英] Chart.js - Color specific parts of the background in a line chart
本文介绍了Chart.js-在折线图中为背景的特定部分上色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个类似于此折线图的图表：
这是使用油漆的快速草图。任何与此相似的东西都值得欢迎。
我该怎么做？我尝试查看文档但没有发现任何内容。
我目前有一种解决方法，即使用折线图叠加在水平条形图上，但这远非理想。
>预先感谢！
解决方案
下面是一个散点图示例：
var randomScalingFactor = function（）{return（Math.random（）> 0.5？1.0：-1.0 ）* Math.round（Math.random（）* 100）;}; var randomColor = function（opacity）{return'rgba（'+ Math.round（Math.random（）* 255）+' ，’+ Math.round（Math.random（）* 255）+’，’+ Math.round（Math.random（）* 255）+‘，’+（不透明度|| '.3'）+'）';}; var data = {数据集：[{标签：我的第一个数据集，数据：[{x：randomScalingFactor（），y：randomScalingFactor（），}，{x：randomScalingFactor （），y：randomScalingFactor（），}，{x：randomScalingFactor（），y：{x：randomScalingFactor（），y：randomScalingFactor（），}，{x：randomScalingFactor（），y： randomScalingFactor（），}，{x：randomScalingFactor（），y：randomScalingFactor（），}，{x：randomScalingFactor（），y：randomScalingFactor（），}]}，{标签：我的第二数据集，数据：[ {x：randomScalingFactor（），y：randomScalingFactor（），}，{x：randomScalingFactor（），y：randomScalingFactor（），}，{x：randomScalingFactor（），y：randomScalingFactor（），}，{x：randomScalingFactor ），y：randomScalingFactor（），}，{x：randomScalingFactor（），y：randomScalingFactor（），}，{x：randomScalingFactor（）， y：randomScalingFactor（），}，{x：randomScalingFactor（），y：randomScalingFactor（），}]}]} ;; data.datasets.forEach（function（dataset）{dataset.borderColor = randomColor（0.4）; Dataset.backgroundColor = randomColor（0.1）; dataset.pointBorderColor = randomColor（0.7）; dataset.pointBackgroundColor = randomColor（0.5）; dataset.pointBorderWidth = 1;}）; var ctx = document.getElementById（ canvas）。getContext（ 2d）; window.myScatter = new Chart（ctx，{type：'scatter'，data：data，options： {标度：{xAxes：[{位置：'底部'，gridLines：{zeroLineColor： rgba（0,255,0,1）}，scaleLabel：{display：true，labelString：'x axis'}，}]，yAxes ：[{position：'left'，gridLines：{zeroLineColor： rgba（0,255,0,1）}，scaleLabel：{display：true，labelString：'y axis'}，刻度：{最小值：-100，最大值：100}}]}，注解：{drawTime： afterDraw，事件：['dblclick']，注解：[{id：'low-box'，类型：'box'，xScaleID：'x-axis-1 '，yScaleID：'y-axis-1'，xMin：-100，xMax：100，yMin：-100，yMax：-40，backgroundColor：'rgba（255，0，0，0.3）'，// borderColo r：'rgb（255，0，0）'，borderWidth：1}，{id：'hi-box'，类型：'box'，xScaleID：'x-axis-1'，yScaleID：'y-axis- 1'，xMin：-100，xMax：100，yMin：100，yMax：40，backgroundColor：'rgba（255，0，0，0.3）'，// borderColor：'rgb（255，0，0）'， borderWidth：1}]}}}）;
<脚本src = https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js>< / script><脚本src = https：/ /cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js\"</script><canvas id = canvas>< / canvas>
I have a line chart much like this one: http://www.chartjs.org/samples/latest/charts/line/basic.html
I would like to color the areas -100 < y < -40 and 40 < y < 100 a slight tint of red to indicate that point that fall in that area are in a danger zone.
This was a quick sketch using paint. Anything similar to this is welcome. How can I do this? I tried looking into the documentation but found nothing.
I currently have a workaround using a line chart stacked over a horizontal bar chart but it is far from ideal.
Thanks in advance!
解决方案
You can use annotation plugin and in particular Box annotations.
Here below there is an example with Scatter chart:
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var randomColor = function(opacity) {
return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
};
var data = {
datasets: [{
label: "My First dataset",
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}, {
label: "My Second dataset",
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}]
};
data.datasets.forEach(function(dataset) {
dataset.borderColor = randomColor(0.4);
dataset.backgroundColor = randomColor(0.1);
dataset.pointBorderColor = randomColor(0.7);
dataset.pointBackgroundColor = randomColor(0.5);
dataset.pointBorderWidth = 1;
});
var ctx = document.getElementById("canvas").getContext("2d");
window.myScatter = new Chart(ctx, {
type: 'scatter',
data: data,
options: {
scales: {
xAxes: [{
position: 'bottom',
gridLines: {
zeroLineColor: "rgba(0,255,0,1)"
},
scaleLabel: {
display: true,
labelString: 'x axis'
},
}],
yAxes: [{
position: 'left',
gridLines: {
zeroLineColor: "rgba(0,255,0,1)"
},
scaleLabel: {
display: true,
labelString: 'y axis'
},
ticks: {
min: -100,
max: 100
}
}]
},
annotation: {
drawTime: "afterDraw",
events: ['dblclick'],
annotations: [{
id: 'low-box',
type: 'box',
xScaleID: 'x-axis-1',
yScaleID: 'y-axis-1',
xMin: -100,
xMax: 100,
yMin: -100,
yMax: -40,
backgroundColor: 'rgba(255, 0, 0, 0.3)',
//borderColor: 'rgb(255, 0, 0)',
borderWidth: 1
},{
id: 'hi-box',
type: 'box',
xScaleID: 'x-axis-1',
yScaleID: 'y-axis-1',
xMin: -100,
xMax: 100,
yMin: 100,
yMax: 40,
backgroundColor: 'rgba(255, 0, 0, 0.3)',
//borderColor: 'rgb(255, 0, 0)',
borderWidth: 1
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
<canvas id="canvas"></canvas>
这篇关于Chart.js-在折线图中为背景的特定部分上色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
