Chart.js 2.9.4如何在上方（全域）显示温度网格线？

针对网格线仅在标签下方显示、无法覆盖整个图表区域的问题，结合Chart.js 2.9.4版本特性，可通过以下配置调整实现网格线在图表上方全域显示：

关键配置修改 #

在Y轴的gridLines配置中添加层级控制属性，并调整数据集的显示层级，确保网格线优先级高于数据系列：

options: {
  scales: {
    yAxes: [{
      gridLines: {
        display: true,
        color: "gray",
        lineWidth: 1,
        drawOnChartArea: true,
        // 让网格线层级高于数据集
        zIndex: 2
      }
    }]
  },
  datasets: [{
    // 数据集层级设为低于网格线
    zIndex: 1
    // 其他数据集配置项...
  }]
}

原理说明 #

Chart.js 2.x默认网格线层级低于数据集，会被温度曲线等数据系列遮挡。通过将gridLines.zIndex设为大于数据集的zIndex，可让网格线显示在所有数据上方；drawOnChartArea: true确保网格线覆盖整个绘图区域，而非仅刻度标签下方。

额外注意事项 #

• 补全你提供的代码片段中缺失的}]闭合标记，避免配置报错
• 若存在多个数据集，需为所有数据集设置低于网格线的zIndex值

参考期望效果：网格线完整覆盖图表区域，清晰显示在数据系列上方，且与Y轴刻度精准对应。

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