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