Charts.js：如何删除条形图中的垂直黑线答案

【问题标题】：Charts.js : How to remove the Vertical Black lines in Bar ChartCharts.js：如何删除条形图中的垂直黑线
【发布时间】：2021-07-16 03:06:14
【问题描述】：

如何删除条形图中条形两侧显示的垂直黑线？

我都试过了

 options : {
scaleShowVerticalLines: false
}

options : {
    scales : {
        xAxes : [ {
            gridLines : {
                display : false
            }
        } ]
    }
}

这是我的代码行：

//Chart Axis's


let scales = {
    xAxes: [{
        gridLines: { display: false },
        ticks: {
            font: {
                size: config.size,
            },
            color: "white",
        },
      
    }],
    yAxes: [{
        ticks: {
            beginAtZero:true
        },
    }]
};



 let ctx = document.getElementById('how_i_spend_canvas');
        if (ctx) { // DOM element is present and not null
            let categoriesChart = new Chart(ctx.getContext('2d'), {
                type: 'bar',
                data: howISpendChartdata,
                // Chart pulgins & Options
                plugins: [ChartDataLabels],
                options: {
                    scales: scales,
                    responsive: true,
                    maintainAspectRatio: false,
                    aspectRatio: 2,
                    plugins: plugins,
                   }
}
                onClick: function (evt, element) {}

但我不适合我。

参考箭头指向线条的位置。

【问题讨论】：

你能发布你的完整代码吗？它应该可以工作，请检查以下 jsfiddle >> jsfiddle.net/1wjh8b5n
@Rukshán 这是我的代码 //Chart Axis's let scales = { xAxes: [{ gridLines: { display: false }, ticks: { font: { size: config.size, }, color: "white", }, }], yAxes: [{ ticks: { beginAtZero:true }, }] };
让 ctx = document.getElementById('how_i_spend_canvas'); if (ctx) { // DOM 元素存在且不为空 let categoriesChart = new Chart(ctx.getContext('2d'), { type: 'bar', data: howISpendChartdata, // 图表插件和选项插件：[ChartDataLabels ], options: { scales: scales, responsive: true, maintainAspectRatio: false, aspectRatio: 2, plugins: plugins, onClick: function (evt, element) {
如果您使用的是 V3，请不要使用说明您使用的是 v2 的标签来标记您的问题

标签： javascript charts chart.js chartjs-2.6.0

【解决方案1】：

现在得到了答案，因为在 Chart JS 3 中，它们已更改为 grid 而不是常见的 gridlines 命令。

现在在图表 JS 3 中可以使用：

x: {
     grid:{
           color:'red',
           display: false,
        }
  },
  

  y:{
      ticks: {
      beginAtZero: true
    },

  grid: {
        color: 'green',
        display: true,
    }
  }

Result ScreenShot

【讨论】：