我使用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,但我找不到任何关于隐藏这些“网格线”的东西。
如何删除网格线?
当前回答
请参阅官方文件:
https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration
下面的代码更改将隐藏gridLines:
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
}
其他回答
这为我的react项目做了
天平:{ xAxis: { 网格:{ 显示:假 } } }
我希望这对你们有帮助
如果你想隐藏网格线,但想显示yAxes,你可以设置:
yAxes: [{...
gridLines: {
drawBorder: true,
display: false
}
}]
如果你想让它们默认消失,你可以设置:
Chart.defaults.scale.gridLines.display = false;
好吧,别介意. .我发现了窍门:
scales: {
yAxes: [
{
gridLines: {
lineWidth: 0
}
}
]
}
我发现了一个解决方案,隐藏网格线在折线图。
将gridLines颜色设置为与div的背景色相同。
var options = {
scales: {
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}],
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
或使用
var options = {
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
}
}