Chartjs 数据集重叠和 z-index

Question

我使用 chart.js 版本 3.x 实现了以下图表。

我的图表中有多个数据集来实现我想要的行为。

我遇到了数据集重叠的问题。在图表中，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

除了定义多个数据集，您还可以按如下方式进行：

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

Note that you have to define xAxes.ticks.max in order to obtain the open end line at the right of the chart.

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

new Chart('line-chart', {
  type: "scatter",
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      var xAxis = chart.scales['x-axis-1'];
      var yAxis = chart.scales['y-axis-1'];
      var dataset = chart.data.datasets[0];
      var y = yAxis.getPixelForValue(0);
      dataset.data.forEach((value, index) => {
        var xFrom = xAxis.getPixelForValue(value.x);
        var xTo;
        if (index + 1 < dataset.data.size) {
          xTo = xAxis.getPixelForValue(dataset.data[index + 1].x);
        } else {
          xTo = xAxis.right;
        }        
        ctx.strokeStyle = dataset.backgroundColor[index];
        ctx.lineWidth = 4;
        ctx.beginPath();
        ctx.moveTo(xFrom, y);
        ctx.lineTo(xTo, y);
        ctx.stroke();        
      });
      ctx.restore();
    }
  }],
  data: {
    datasets: [{
      data: [
        { x: 0, y: 0 },
        { x: 1, y: 0 },
        { x: 2, y: 0 }
      ],
      backgroundColor: ['red', 'blue', 'green'],
      borderColor: ['red', 'blue', 'green'],
      pointRadius: 8,
      pointHoverRadius: 8,
    }],
  },
  options: {
    layout: {
      padding: {
        left: 10,
        right: 10
      }
    },
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      yAxes: [{
        ticks: {
          display: false
        },
        gridLines: {
          display: false,
        }
      }],
      xAxes: [{
        ticks: {
          display: false,
          max: 3
        },
        gridLines: {
          display: false
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="line-chart" height="30"></canvas>

Answer 2

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

首先绘制 order 较高的数据集
最后绘制没有顺序或顺序较低的数据集，因此出现在顶部

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

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

Chartjs 数据集重叠和 z-index

Chartjs Datasets overlapping and z-index

chart.js

chart.js3