我想使用选项字段更改折线图的网格颜色,但我不知道从哪里开始 . 我首先尝试使用渐变来更改画布背景颜色,但结果并不好 .
canvas{
background:linear-gradient(top, #ea1a07 0%, #f4b841 75%,#f2dd43 100%);
}
但是,我没有得到我想要的东西,因为正如你在上面的图片中看到的那样,不仅网格被着色而且x值,y标签和图表图例也被着色 .
Picture of the result I'm getting with this css code
我的chart.js选项是
options = {
scales: {
xAxes: [{
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 1
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
max: 100,
min: 0,
stepSize: 10
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
}
}]
},
responsive: true
};
那么,有没有办法将网格的背景设置为3种不同的颜色(渐变与否)?注意:我正在使用带有角度2的图表 . (ng2-charts)
1 回答
最简单的方法是使用chartjs-plugin-annotation插件并配置绑定到Y轴的3个框注释(每个框的颜色不同) .
下面是一个示例(您可以使用此codepen查看它的运行情况) .
重要的是要注意注释被绘制在图表的顶部,因此您的注释颜色需要包含一些透明度以查看其背后的东西 .
使用ng2-charts的这个插件没有问题 . 只需在应用程序的html文件中的
<script>
中添加源代码,并将annotation
属性添加到options
对象中 . 这是一个Angular2 / ng2-charts example,演示如何使用注释插件 .