Javascript Chart.js v2 - 隐藏网格线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36676263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart.js v2 - hiding grid lines
提问by iSS
I am using Chart.js v2 to draw a simple line chart. Everything looks fine, except there are grid lines that I don't want:
我正在使用 Chart.js v2 绘制一个简单的折线图。一切看起来都很好，除了有我不想要的网格线：
The documentation for Line Chart is here: https://nnnick.github.io/Chart.js/docs-v2/#line-chart, but I can't find anything about hiding those "Grid Lines".
折线图的文档在这里：https://nnnick.github.io/Chart.js/docs-v2/#line-chart，但我找不到任何关于隐藏那些“网格线”的信息。
How can I remove the grid lines?
如何去除网格线？
回答by Irvine
I found a solution that works for hiding the grid lines in a Line chart.
我找到了一个可以在折线图中隐藏网格线的解决方案。
Set the gridLinescolor to be the same as the div's background color.
将gridLines颜色设置为与 div 的背景颜色相同。
var options = {
scales: {
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}],
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
or use
或使用
var options = {
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
}
}
回答by user2138568
options: {
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
}
回答by david
If you want them gone by default, you can set:
如果您希望它们默认消失，您可以设置：
Chart.defaults.scale.gridLines.display = false;
回答by Kathy
If you want to hide gridlines but want to show yAxes, you can set:
如果要隐藏网格线但要显示 yAxes，可以设置：
yAxes: [{...
gridLines: {
drawBorder: true,
display: false
}
}]
回答by hygorbudny
OK, nevermind.. I found the trick:
好吧，没关系..我找到了诀窍：
scales: {
yAxes: [
{
gridLines: {
lineWidth: 0
}
}
]
}
回答by lilhamad
The code below removes remove grid lines from chart area only not the ones in x&y axis labels
下面的代码仅从图表区域中删除网格线，而不是 x&y 轴标签中的网格线
Chart.defaults.scale.gridLines.drawOnChartArea = false;
