Chart.js：仅显示零索引处的水平网格线答案

【问题标题】：Chart.js: Display only the horizontal gridline at zero indexChart.js：仅显示零索引处的水平网格线
【发布时间】：2017-12-24 12:04:27
【问题描述】：

如何显示零值的水平网格线？

我目前正在使用以下代码：

yAxes: [{
    gridLines: {
        display: true,
        color: [
            "rgba(0, 0, 0, 0.1)",
            "rgb(255, 255, 255)",
            "rgb(255, 255, 255)",
            "rgb(255, 255, 255)",
            "rgb(255, 255, 255)"
        ],
    },
    afterTickToLabelConversion: function (scaleInstance) {
        scaleInstance.ticks.unshift(null);
        scaleInstance.ticksAsNumbers.unshift(null);
        scaleInstance.zeroLineIndex++
        display: false
    },

当图表显示在带有白色背景的 HTML 页面上时，这可以正常工作。

但是，当图表被保存并在图片查看器中查看时，会出现白线（我需要隐藏/删除这些线，同时将线保持在零位置）。

例子：

【问题讨论】：

标签： chart.js gridlines

【解决方案1】：

来自 Ted Whitehead 的出色解决方案。我发现这也很简单；

gridLines: {
  color: "transparent"
}

【讨论】：

【解决方案2】：

这似乎也有效：

gridLines: {
  lineWidth: 0,
  zeroLineWidth: 1
}

【讨论】：

【解决方案3】：

这些设置对我有用：

gridLines: {
  color: "transparent",
  display: true,
  drawBorder: false,
  zeroLineColor: "#ccc",
  zeroLineWidth: 1
}

http://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

【讨论】：