Javascript 如何使用Chart.js删除不必要的重叠网格线？

我用Chartjs绘制了一张图表。我可以解释我想删除的像素，但我认为图像会让它更清晰：

下面是生成此图的代码：

var options = {
    type: 'bar',
    data: {
        labels: ["1", "2", "3", "4", "5"],
        datasets: [
            {
                borderWidth: 2,
                borderColor: "#5d5d5d",
                pointBorderColor: "#5d5d5d",
                pointBackgroundColor: "#5d5d5d",
                pointBorderWidth: 5,
                type: 'line',
                data: [26, 26, 33, 28, 30],
                fill: false,
                lineTension: 0
            },
            {
                borderWidth: 3,
                pointBorderColor: "#b8b8b8",
                pointBackgroundColor: "#b8b8b8",
                pointBorderWidth: 10,
                type: 'line',
                data: [26, 26, 29, 28, 29],
                fill: false,
                lineTension: 0
            },
            {
                data: [0, 0, 0, 0, 0],
                fill: false,
                lineTension: 0
            }
        ]
    },
    options: {
        hover: {mode: null},
        legend: {
            display: false
        },
        tooltips: {enabled: false},
        hover: {mode: null},
        scales: {
            xAxes: [{
                gridLines: {
                    // drawBorder: false,
                },
            }],
            yAxes: [{
                display: false,
                ticks: {
                    suggestedMin: 0,
                    max: 60,
                    beginAtZero: true
                }
            }]
        }
    }
}

var ctx = document.getElementById(elementID).getContext('2d');
new Chart(ctx, options);

---

有人知道如何使用Chart.js删除那些不必要的重叠线吗？

您可以使用以下图表插件删除那些不必要的重叠线：

Chart.plugins.register({
   beforeDraw: function(chart) {
      var ctx = chart.chart.ctx,
         x_axis = chart.scales['x-axis-0'],
         topY = chart.scales['y-axis-0'].top,
         bottomY = chart.scales['y-axis-0'].bottom;
      x_axis.options.gridLines.display = false;
      x_axis.ticks.forEach(function(label, index) {
         var x = x_axis.getPixelForValue(label);
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x, bottomY);
         ctx.lineWidth = 1;
         ctx.strokeStyle = x_axis.options.gridLines.color;
         ctx.stroke();
         ctx.restore();
      });
   }
});

ᴡᴏʀᴋɪɴɢ ᴅᴇᴍᴏ ⧩

Chart.plugins.register{ 绘制前：功能图{ var ctx=chart.chart.ctx， x_轴=图表刻度['x轴-0']， topY=图表。比例['y轴-0']。顶部， 底部=图表刻度['y轴-0']。底部； x_axis.options.gridLines.display=false； x_axis.ticks.foreachFunction标签、索引{ var x=x_轴。getPixelForValuelabel； ctx.save； ctx.beginPath； ctx.moveTox，topY； ctx.lineTox，底部； ctx.lineWidth=1； ctx.strokeStyle=x_axis.options.gridLines.color； ctx.stroke； ctx.restore； }; } }; 变量选项={ 类型：'bar'， 数据：{ 标签：[1,2,3,4,5]， 数据集：[{ 边界宽度：2， 边框颜色：5d5d5d， 点边框颜色：5d5d5d， pointBackgroundColor:5d5d5d， 点边界宽度：5， 键入：“行”， 数据：[26,26,33,28,30]， 填充：假， 线张力：0 }, { 边框宽度：3， pointBorderColor:b8b8b8， pointBackgroundColor:b8b8b8， 点边界宽度：10， 键入：“行”， 数据：[26,26,29,28,29]， 填充：假， 线张力：0 }, { 数据：[0,0,0,0,0]， 填充：假， 线张力：0 }] }, 选项：{ 悬停：{ 模式：空 }, 图例：{ 显示：假 }, 工具提示：{ 已启用：false }, 悬停：{ 模式：空 }, 比例：{ xAxes：[{ 网格线：{ //抽边线：假， }, }], 雅克斯：[{ 显示：假， 滴答声：{ 建议分钟：0， 最高：60， 贝吉纳泽罗：是的 } }] } } } var ctx=document.getElementById'canvas'.getContext'2d'； 新的Chartctx，选项；