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

Question

我使用 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 删除那些不必要的重叠线吗？

Answer 1

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

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({
   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();
      });
   }
});

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('canvas').getContext('2d');
new Chart(ctx, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>