javascript - Chart.js 在两点之间画线

Question

在我的图表(只是一条水平线)上，我想绘制第二条水平线。第二条线只是两个任意点之间的一条线。
到目前为止，我还没有设法画出第二条线。不渲染第二行。

  // labels (dates)
  var startDate = new Date('2019-10-01'), endDate = new Date('2019-10-10');
  var dt = new Date(startDate);
  let labels = new Array();
  while (dt <= endDate) {
    labels.push(new Date(dt));
    dt.setDate(dt.getDate() + 1);
  }

  const numbers = new Array();
  const numbers1 = new Array();

  // data for first line (just a horizontal line)
  for (var a = 0; a < 10; a++) {
    numbers.push(5);
  }

  // data for the second line, also a horizontal line but smaller
  for (var a = 0; a < 10; a++) {
    if (a == 3 || a == 7) {
      numbers1.push(6);
    } else {
      numbers1.push(null);
    }
  }


  this.canvas = document.getElementById('myChart');
  this.ctx = this.canvas.getContext('2d');

  // display chart
  const myChart = new Chart(this.ctx, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        label: 'Daily prices',
        data: numbers,
        fill: false,
        borderWidth: 2,
        borderColor: 'black'
      }, {
        label: 'Pattern',
        data: numbers1,
        fill: false,
        borderWidth: 2,
        borderColor: 'red'
      }]
    },
    options: {
      elements: {point: {radius: 0}},
      responsive: false,
      display: true
    }
  });
}

Answer 1

默认情况下，Chart.js 不会在非相邻点之间画一条线。这可以为每个数据集启用，使用 spanGaps property :

If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line.

...
{
    label: 'Pattern',
    data: numbers1,
    fill: false,
    borderWidth: 2,
    borderColor: 'red',
    spanGaps: true
}
...