Chart.js 3.6.0 两折线间填充色覆盖数据点问题（react-chartjs-2）

使用react-chartjs-2开发折线图，给两条折线之间的区域配置填充色时，会出现填充区域覆盖折线数据点的显示异常。

该问题在Chart.js 3.6.0版本中存在。

Chart.js默认绘制层级遵循「同order数据集按数组顺序渲染，单数据集内渲染顺序为填充区域→折线线条→数据点」的规则，跨数据集填充时，后渲染数据集的填充区域会覆盖先渲染数据集的点元素，最终出现点被色块遮挡的现象。

二选一即可修复问题：

• 调整数据集绘制优先级：给需要显示数据点的折线数据集配置更小的order值（数值越小渲染优先级越高，越靠上层显示），将作为填充参照的基准线数据集配置更大的order值，确保点元素在填充区域绘制完成后再渲染。核心配置参考：

const chartData = {
  labels: xAxisData,
  datasets: [
    // 下层基准线，层级靠后
    {
      label: '基准值',
      data: baseValueList,
      borderColor: '#eee',
      fill: false,
      pointRadius: 0,
      order: 2
    },
    // 上层业务折线，层级靠前
    {
      label: '实际值',
      data: realValueList,
      borderColor: '#2563eb',
      backgroundColor: 'rgba(37,99,235,0.2)',
      pointRadius: 4,
      pointBackgroundColor: '#2563eb',
      fill: {
        target: 0 // 填充到索引为0的基准线位置
      },
      order: 1
    }
  ]
}

• 强制提升数据点层级：直接在图表配置中给点元素设置更高的z值，让点始终在最上层渲染，配置参考：

const chartOptions = {
  elements: {
    point: {
      z: 10 // 数值大于填充区域默认z值（0）即可
    }
  }
}

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