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

问题描述

有谁知道这是否是 charts.js 2.X 中的错误？在折线图下，它不会显示网格线。我已经在 Charts.js 3.X 中对此进行了测试，它运行良好，但我需要使用 2.X 来支持 IE11...好像是个bug。

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',fontSize: 12,lineHeight: 0,padding: {top: 15,right: 0,bottom: 5,left: 0 }
        },gridLines: { 
          display: true,drawOnChartArea: true
        }
      }],yAxes: [{
        id: 'y',fontStyle: 'normal',},labelString: 'Speed (MB/s)',padding: {top: 10,bottom: 10,drawOnChartArea: true
        }
      }]
    }
}

Line graph no gridlines under line

解决方法

这是因为您在数据集中将 $_.Name 设置为白色，默认情况下在 v2 中填充为真并采用背景色，在 v3 中默认情况下该行不会被填充，因此您需要提供半透明白色背景色或设置填充为假，如下图

示例：

backgroundColor

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);