我使用chart. js v2绘制一个简单的折线图。一切看起来都很好,除了我不想要的网格线:
折线图的文档在这里:https://nnnick.github.io/Chart.js/docs-v2/#line-chart,但我找不到任何关于隐藏这些“网格线”的东西。
如何删除网格线?
我使用chart. js v2绘制一个简单的折线图。一切看起来都很好,除了我不想要的网格线:
折线图的文档在这里:https://nnnick.github.io/Chart.js/docs-v2/#line-chart,但我找不到任何关于隐藏这些“网格线”的东西。
如何删除网格线?
当前回答
ChartJS 3的更新:
const options = {
scales: {
x: {
grid: {
display: false,
},
},
y: {
grid: {
// display: false,
color: 'rgba(217,143,7,0.1)',
},
},
},
}
其他回答
在chartjs 3中,访问这个配置有一点不同。属性的名称不是gridLines,而是grid,如官方文档所示:
选项。gridLines被重命名为options.grid
来源: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#ticks
这是它的样子:
const options = {
scales: {
x: {
grid: {
display: false,
},
},
},
};
如果你想隐藏网格线,但想显示yAxes,你可以设置:
yAxes: [{...
gridLines: {
drawBorder: true,
display: false
}
}]
options: {
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
}
下面的代码只删除x轴和y轴标签中的网格线
Chart.defaults.scale.gridLines.drawOnChartArea = false;
ChartJS 3的更新:
const options = {
scales: {
x: {
grid: {
display: false,
},
},
y: {
grid: {
// display: false,
color: 'rgba(217,143,7,0.1)',
},
},
},
}