chart.js - Chart.JS 中缺失数据的虚线(spanGaps 样式)

Question

我有一个数据点为空的图表。 Chart.js 做了正确的事情并跳过了这些数据点，但我希望用“虚线”填充缺失的部分。例如，在下面的代码中，该行应该像 CodePen 链接中那样是实心的，但应该是从“蓝色”到“黄色”的虚线。我知道spanGaps选项可用，但我想对其应用不同的样式。

有没有人对如何做到这一点有任何想法？我正在使用 Chart.js 2.x

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Orange", "Yellow"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, null, 3]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

CodePen

Answer 1

Plugin Core API提供了一系列可用于执行自定义代码的钩子(Hook)。您可以使用 beforeDraw使用 CanvasRenderingContext2D 直接在 Canvas 上使用文本在不同数据点之间绘制不同样式的线的钩子(Hook).
请看下面的可运行代码片段:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      let xAxis = chart.scales['x-axis-0'];
      let yAxis = chart.scales['y-axis-0'];
      let dataset = chart.data.datasets[0];
      var valueFrom = null;
      var valueFromIndex = 0;
      var xFrom = null;
      let yFrom = null;
      ctx.strokeStyle = dataset.borderColor;
      dataset.data.forEach((value, index) => {
        if (value != null) {
          var x = xAxis.getPixelForTick(index);
          var y = yAxis.getPixelForValue(value);
          if (valueFrom != null) {
            ctx.lineWidth = dataset.borderWidth;
            if (index - valueFromIndex > 1) {
              ctx.setLineDash([5, 5]);
            } else {
              ctx.setLineDash([]);
            }
            ctx.beginPath();
            ctx.moveTo(xFrom, yFrom);
            ctx.lineTo(x, y);
            ctx.stroke();
          }
          valueFrom = value;
          valueFromIndex = index;
          xFrom = x;
          yFrom = y;
        }
      });
      ctx.restore();
    }
  }],
  data: {
    labels: ["A", "B", "C", "D", "E", "F", "G"],
    datasets: [{
      label: 'My Dataset',
      data: [12, 19, null, 3, 6, null, 8],
      backgroundColor: 'rgba(255, 99, 132, 0.6)',
      borderColor: 'rgb(255, 99, 132)',
      borderWidth: 3,
      showLine: false,
    }]
  },
  options: {
    animation: {
      duration: 0
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>