Charts.js 2.9.4版本折线图下方网格线无法显示问题咨询

问题结论 #

Chart.js 2.X版本确实存在折线图下方网格线无法正常显示的原生问题，该问题在3.X版本中得到了修复，你的现有配置没有错误。

兼容IE11的修复方案 #

你可以选择以下任意一种方案适配2.X版本，所有方案均支持IE11运行：

• 方案1：补充Y轴网格线配置，强制绘制边界线
  在你现有yAxes.gridLines配置中新增以下参数：

  gridLines: { 
    display: true,
    drawOnChartArea: true,
    drawBorder: true,
    zeroLineWidth: 1,
    zeroLineColor: 'rgba(0, 0, 0, 0.1)' // 请替换为你实际使用的网格线色值
  }
  

• 方案2：开启Y轴偏移，避免底部网格线被截断
  在yAxes.ticks配置中添加offset: true参数，让Y轴刻度整体偏移，露出最底部的网格线。
• 方案3：手动绘制底部横线（适配所有场景）
  如果上述配置都无法匹配你的需求，可以通过动画完成钩子手动补画底部网格线，在全局options中新增以下配置即可：

  animation: {
    onComplete: function(chart) {
      var ctx = chart.chart.ctx;
      var yAxis = chart.scales['y'];
      var xAxis = chart.scales['x'];
      ctx.save();
      ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)'; // 替换为你的网格线色值
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(xAxis.left, yAxis.bottom);
      ctx.lineTo(xAxis.right, yAxis.bottom);
      ctx.stroke();
      ctx.restore();
    }
  }
  

内容的提问来源于stack exchange，提问作者Drew Glapa