Charts.js (2.9.4) 网格线不在折线图下显示答案

【问题标题】：Charts.js (2.9.4) Gridlines not displaying under Line GraphCharts.js (2.9.4) 网格线不在折线图下显示
【发布时间】：2021-06-24 21:51:39
【问题描述】：

有谁知道这是否是charts.js 2.X 中的错误？在折线图下，它不会显示网格线。我已经在 Charts.js 3.X 中对此进行了测试，它运行良好，但我需要使用 2.X 来支持 IE11...我尝试了很多没有运气的事情，我认为这个选项将是一个 gridLines 选项，但是看起来这可能是一个错误。

options: {
    responsive: true,
    maintainAspectRatio: true,   
    elements: {
      line: {
        tension: 0
      }
    },    
    layout: {
      padding: 16
    },

    legend: {
      display: false
    },

    plugins: {
      datalabels: {
        display: false
      }
    },

    scales: {  
      xAxes: [{
        id: 'x',
        display: true,
        ticks: {
          display: true,
          beginAtZero: false,
          fontFamily: 'Roboto',
          fontColor: '#000',
          fontStyle: 'bold',
          fontSize: 12
        },
        scaleLabel: {
          display: true,
          labelString: 'Year',
          fontFamily: 'Roboto',
          fontColor: '#000',
          fontStyle: 'bold',
          fontSize: 12,
          lineHeight: 0,
          padding: {top: 15, right: 0, bottom: 5, left: 0 }
        },
        gridLines: { 
          display: true,
          drawOnChartArea: true
        }
      }],

      yAxes: [{
        id: 'y',
        display: true,
        ticks: {
          display: true,
          beginAtZero: false,
          fontFamily: 'Roboto',
          fontColor: '#000',
          fontStyle: 'normal',
          fontSize: 12,
        },
        scaleLabel: {
          display: true,
          labelString: 'Speed (MB/s)',
          fontFamily: 'Roboto',
          fontColor: '#000',
          fontStyle: 'bold',
          fontSize: 12,
          lineHeight: 0,
          padding: {top: 10, right: 0, bottom: 10, left: 0 }
        },
        gridLines: { 
          display: true,
          drawOnChartArea: true
        }
      }]
    }
}

Line graph no gridlines under line

【问题讨论】：

标签： chart.js linechart

【解决方案1】：

这是因为您在数据集中将backgroundColor 设置为白色，默认情况下在 v2 中填充为 true 并采用背景色，在 v3 中默认情况下该行不会被填充，因此您需要提供半透明的白色背景颜色或者如下图将fill设置为false

例子：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Points',
      data: [7, 11, 5, 8, 3, 7],
      borderWidth: 3,
      backgroundColor: 'white',
      borderColor: 'blue',
      fill: false
    }]
  },
}

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

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

【讨论】：

好的，这是有道理的，谢谢 LeeLenalee