如何使用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>