Chart.js Chartjs数据集重叠和z索引

我已经使用Chart.js 3.x版实现了下面的图表

我的图表中有多个数据集来实现我想要的行为。
我面临数据集重叠的问题。
在图表中，我有

蓝色线的末端

与

绿色点

数据集重叠。有没有办法避免这个问题

我有以下两个数据集：

// 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索引，以便它们显示在堆栈中前一个数据集的顶部。

您可以按以下步骤进行操作，而不是定义多个数据集：

• 首先将折线图转换为散点图
• 然后使用直接在画布上绘制线。API提供了一系列钩子，可用于执行自定义代码。您可以使用

  beforeDraw

  钩子在数据点之间和图表的开放端绘制不同颜色的连接线

请注意，您必须定义

xAxes.ticks.max

，才能获得图表右侧的开放端线

请看一下下面的可运行代码片段，看看它是如何工作的

新图表（“折线图”{
键入：“散布”，
插件：[{
绘制前：图表=>{
var ctx=chart.chart.ctx；
ctx.save（）；
var xAxis=图表刻度['x轴-1']；
var yAxis=图表刻度['y轴-1']；
var数据集=chart.data.datasets[0]；
变量y=yAxis.getPixelForValue（0）；
dataset.data.forEach（（值，索引）=>{
var xFrom=xAxis.getPixelForValue（value.x）；
var-xTo；
if（索引+1
不需要定义多个数据集，您可以按以下步骤进行操作：


首先将折线图转换为散点图
然后使用直接在画布上绘制线。API提供了一系列钩子，可用于执行自定义代码。您可以使用
beforeDraw
钩子在数据点之间和图表的开放端绘制不同颜色的连接线

请注意，您必须定义
xAxes.ticks.max
，才能获得图表右侧的开放端线

请看一下下面的可运行代码片段，看看它是如何工作的


新图表（“折线图”{
键入：“散布”，
插件：[{
绘制前：图表=>{
var ctx=chart.chart.ctx；
ctx.save（）；
var xAxis=图表刻度['x轴-1']；
var yAxis=图表刻度['y轴-1']；
var数据集=chart.data.datasets[0]；
变量y=yAxis.getPixelForValue（0）；
dataset.data.forEach（（值，索引）=>{
var xFrom=xAxis.getPixelForValue（value.x）；
var-xTo；
if（索引+1

该选项与z索引具有类似的效果


首先绘制具有较高顺序的数据集
无顺序或更低顺序的数据集最后绘制，因此显示在顶部

因此，向行数据集中添加
order:1
应该可以解决这个问题

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

该选项的效果与z索引类似


首先绘制具有较高顺序的数据集
无顺序或更低顺序的数据集最后绘制，因此显示在顶部

因此，向行数据集中添加
order:1
应该可以解决这个问题

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

感谢您的方法，但使用上述解决方案会破坏我希望在图表中显示的行为。有没有一种方法可以简单地在图表中设置数据集的z-索引？感谢这种方法，但是使用上述解决方案会破坏