chart.js - Chartjs 数据集重叠和 z-index

Question

我使用chart.js 3.x版实现了以下图表。
https://jsfiddle.net/Lxya0u98/12/
我的图表中有多个数据集来实现我想要的行为。
我面临着数据集重叠的问题。
在图表中，我结束了blue color line与 green color dot 重叠数据集。有没有办法避免这个问题？
我有以下两个数据集:

// Data set for the Big Dot
{
   showLine: false,
   borderWidth: 0,
   lineTension: 0,
   borderColor: colorVal,
   backgroundColor: colorVal,
   pointBackgroundColor: colorVal,
   pointBorderColor: colorVal,
   pointBorderWidth: 2,
   pointRadius: 15,
};

// Data set for the Connecting Lines
{
   showLine: true,
   lineTension: 0,
   borderWidth: 5,
   borderColor: colorVal,
   pointRadius: 0,
   pointBorderWidth: 0,
   spanGaps: true,
};

是否有数据集的 Z 索引，以便它们出现在堆栈中前一个的顶部。

Answer 1

选项 dataset.order 与 z-index 具有类似的效果。

具有更高 order 的数据集先绘制

无序或低序的数据集最后绘制，因此出现在顶部

因此，添加 order: 1到您的线数据集应该可以解决问题。

var newDataLine = {
  ...
  order: 1
};