如何为折线图设置 chart.js 网格颜色
how to set chart.js grid color for line chart
我想使用选项字段更改折线图的网格颜色,但我不知道从哪里开始。
我首先尝试使用渐变更改 canvas 背景颜色,但结果并不好。
canvas{
background:linear-gradient(top, #ea1a07 0%, #f4b841 75%,#f2dd43 100%);
}
但是,我没有得到我想要的结果,因为正如您在上图中看到的那样,不仅网格是彩色的,而且 x 值、y 标签和图表图例也是彩色的。
Picture of the result I'm getting with this css code
Example of what I want to get
我的 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 种不同的颜色(有或没有渐变)?
注意:我正在使用 chart.js 和 angular 2 (ng2-charts)
最简单的方法是使用 chartjs-plugin-annotation
插件并配置绑定到 Y 轴的 3 个框注释(每个框会有不同的颜色)。
下面是一个示例(您可以通过此 codepen 看到它的实际效果)。
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Points',
data: [
{x: 0, y: 2},
{x: 1, y: 3},
{x: 2, y: 2},
{x: 1.02, y: 0.4},
{x: 0, y: -1}
],
backgroundColor: 'rgba(123, 83, 252, 0.8)',
borderColor: 'rgba(33, 232, 234, 1)',
borderWidth: 1,
fill: false,
}],
},
options: {
title: {
display: true,
text: 'Chart.js - Gridline Background',
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: -1,
max: 8,
stepSize: 1,
fixedStepSize: 1,
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 1
}
}],
yAxes: [{
afterUpdate: function(scaleInstance) {
console.dir(scaleInstance);
},
ticks: {
min: -2,
max: 4,
stepSize: 1,
fixedStepSize: 1,
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
}
}]
},
annotation: {
annotations: [{
type: 'box',
yScaleID: 'y-axis-0',
yMin: 1,
yMax: 4,
borderColor: 'rgba(255, 51, 51, 0.25)',
borderWidth: 2,
backgroundColor: 'rgba(255, 51, 51, 0.25)',
}, {
type: 'box',
yScaleID: 'y-axis-0',
yMin: -1,
yMax: 1,
borderColor: 'rgba(255, 255, 0, 0.25)',
borderWidth: 1,
backgroundColor: 'rgba(255, 255, 0, 0.25)',
}, {
type: 'box',
yScaleID: 'y-axis-0',
yMin: -2,
yMax: -1,
borderColor: 'rgba(0, 204, 0, 0.25)',
borderWidth: 1,
backgroundColor: 'rgba(0, 204, 0, 0.25)',
}],
}
}
});
请务必注意,注释是绘制在图表顶部的,因此您的注释颜色需要包含一些透明度才能看到其背后的内容。
在ng2-charts中使用这个插件没有问题。只需在应用的 html 文件中的 <script>
中添加源,并将 annotation
属性 添加到 options
对象中。这是一个 Angular2 / ng2-charts example 演示如何使用注释插件。
我想使用选项字段更改折线图的网格颜色,但我不知道从哪里开始。 我首先尝试使用渐变更改 canvas 背景颜色,但结果并不好。
canvas{
background:linear-gradient(top, #ea1a07 0%, #f4b841 75%,#f2dd43 100%);
}
但是,我没有得到我想要的结果,因为正如您在上图中看到的那样,不仅网格是彩色的,而且 x 值、y 标签和图表图例也是彩色的。
Picture of the result I'm getting with this css code
Example of what I want to get
我的 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 种不同的颜色(有或没有渐变)? 注意:我正在使用 chart.js 和 angular 2 (ng2-charts)
最简单的方法是使用 chartjs-plugin-annotation
插件并配置绑定到 Y 轴的 3 个框注释(每个框会有不同的颜色)。
下面是一个示例(您可以通过此 codepen 看到它的实际效果)。
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Points',
data: [
{x: 0, y: 2},
{x: 1, y: 3},
{x: 2, y: 2},
{x: 1.02, y: 0.4},
{x: 0, y: -1}
],
backgroundColor: 'rgba(123, 83, 252, 0.8)',
borderColor: 'rgba(33, 232, 234, 1)',
borderWidth: 1,
fill: false,
}],
},
options: {
title: {
display: true,
text: 'Chart.js - Gridline Background',
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: -1,
max: 8,
stepSize: 1,
fixedStepSize: 1,
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 1
}
}],
yAxes: [{
afterUpdate: function(scaleInstance) {
console.dir(scaleInstance);
},
ticks: {
min: -2,
max: 4,
stepSize: 1,
fixedStepSize: 1,
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
}
}]
},
annotation: {
annotations: [{
type: 'box',
yScaleID: 'y-axis-0',
yMin: 1,
yMax: 4,
borderColor: 'rgba(255, 51, 51, 0.25)',
borderWidth: 2,
backgroundColor: 'rgba(255, 51, 51, 0.25)',
}, {
type: 'box',
yScaleID: 'y-axis-0',
yMin: -1,
yMax: 1,
borderColor: 'rgba(255, 255, 0, 0.25)',
borderWidth: 1,
backgroundColor: 'rgba(255, 255, 0, 0.25)',
}, {
type: 'box',
yScaleID: 'y-axis-0',
yMin: -2,
yMax: -1,
borderColor: 'rgba(0, 204, 0, 0.25)',
borderWidth: 1,
backgroundColor: 'rgba(0, 204, 0, 0.25)',
}],
}
}
});
请务必注意,注释是绘制在图表顶部的,因此您的注释颜色需要包含一些透明度才能看到其背后的内容。
在ng2-charts中使用这个插件没有问题。只需在应用的 html 文件中的 <script>
中添加源,并将 annotation
属性 添加到 options
对象中。这是一个 Angular2 / ng2-charts example 演示如何使用注释插件。