Chart.js v2-隐藏网格线


Answers:


341

我找到了一种可在折线图中隐藏网格线的解决方案。

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
            }   
        }]
    }
}

2
这实际上是将gridLines颜色设置为0 opacity黑色(透明颜色)。因此,无论div的背景颜色如何,这都应该起作用。
XCS

40
或使用display:false,而不是“ color”
Irvine

4
非常感谢你!如果只是文档在这个主题上更清晰一点。:)
iSS

我想保留比例,但会丢失图表背面的网格线,因此此答案对我不起作用。
adg

1
虽然第一个答案可能会得到所需的图片,但这有点不合时宜。第二种解决方案实际上将gridLines显示属性设置为false,似乎更正确。
Tot Zam

57
options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}

5
这个答案使我可以保持比例,但不能在图表上绘制网格线。
adg

19

如果希望它们默认消失,则可以设置:

Chart.defaults.scale.gridLines.display = false;

12

如果要隐藏网格线但要显示yAxes,则可以设置:

yAxes: [{...
         gridLines: {
                        drawBorder: true,
                        display: false
                    }
       }]

8

好吧,没关系..我找到了窍门:

    scales: {
      yAxes: [
        {
          gridLines: {
                lineWidth: 0
            }
        }
      ]
    }

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.