Chart.js 删除第一条垂直线

Question

有没有办法从图表中删除初始垂直线而不删除值？

这是我的选择：

scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true,
                maxTicksLimit: 5,
                suggestedMax: maxValue
            }
        }],
        xAxes : [{
            categoryPercentage: 1.0,
            display : false, // set this to false to hide the labels under the bars
            gridLines: {
                display: false
            }
        }]
    },

Answer 1

您要删除的可能是图表的边框。在 Chart.js v2 中，我可以通过将网格线配置的

drawBorder

设置为

false

来删除第一个垂直边框：

options: {
    scales: {
        yAxes: [{
            gridLines: {
                drawBorder: false
            }
        }]
    }
}

在 Chart.js 文档中进行了解释 https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration。

Answer 2

尝试使用图表选项

scaleLineColor

，并将颜色设置为具有

0

不透明度：

new Chart(ctx).Bar(data, {
  scaleLineColor: 'rgba(0, 0, 0, 0)',
});

http://jsfiddle.net/wb3kcunt/33/

如果您使用的是 Chartjs

v2

，那么

scales.gridLines

中的 showBorder 选项应该可以解决问题：

options: {
  scales: {
    gridLines: {
      showBorder: false,
    }
  }
}

请参阅文档：http://www.chartjs.org/docs/#scales

Answer 3

对于使用 Chart.js

v3

或

v4

的人，您可以尝试以下解决方案：

对于

v3

，您希望将

display

内的

scales.x.grid

和

drawBorder

内的

scales.y.grid

设置为 false。 第一个将从整个图表中删除垂直线（不包括“第一条垂直线”）。第二个将删除这个“第一条垂直线”。

options: {
  scales: {
    x: {
      grid: {
        display: false
      }
    },
    y: {
      grid: {
        drawBorder: false
      },
    },
  }
}

对于

v4

，概念有些相同，但字段略有不同。 现在，您想要将

display

内的

scales.x.grid

和

display

内的另一个

scales.y.border

设置为 false。 第一个将从整个图表中删除垂直线（不包括“第一条垂直线”）。第二个将删除这个“第一条垂直线”（与上面相同）。

options: {
  scales: {
    x: {
      grid: {
        display: false
      }
    },
    y: {
      border: {
        display: false
      }
    }
  }
}

上述两个解决方案的主要区别在于，它们将

displayBorder

替换为

border.display

属性。