ChartJS 只在零索引处显示水平网格线

nmpmafwu 于 2022-11-06 发布在 Chart.js

关注(0)|答案(4)|浏览(197)

如何显示当前值为零的水平网格线？
我目前正在使用以下代码：

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

来源：https://stackoverflow.com/questions/45186796/chart-js-display-only-the-horizontal-gridline-at-zero-index

4条答案

按热度按时间

ej83mcc01#

这些设置对我很有效：

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

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

赞(0）回复(0）举报 2022-11-06

ui7jx7zq2#

这似乎也行得通：

gridLines: {
  lineWidth: 0,
  zeroLineWidth: 1
}

赞(0）回复(0）举报 2022-11-06

tquggr8v3#

伟大的解决方案，从特德怀特黑德。我发现这也工程与简单;

gridLines: {
  color: "transparent"
}

赞(0）回复(0）举报 2022-11-06

qlvxas9a4#

其他答案对我不起作用，我相信是因为Chart.js 3.x改变了您的操作方式
要在Python 3.x中实现问题中的图表，您需要下面的选项对象。

const options = {
    scales: {
      x: {
        grid: {
          lineWidth: 0,
          drawBorder: false,
        }
      },
      y: {
        grid: {
          lineWidth: context => context.tick.value == 0 ? 1 : 0 //Set only 0 line visible

        }
      }
    }

帮助我解决此Chart.js how to use scriptable options的更多信息

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 只在零索引处显示水平网格线

4条答案

相关问题

热门标签

最新问答