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

Question

我使用Chartjs画了一张图表。我可以解释我想删除的像素，但我认为图像更清晰：

下面是生成此图表的代码：

var orignalHTML = ""; 

$.get(document.location.href, function(data) {
    originalHTML = data;
});

有人知道如何使用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>