Chart.js在两点之间画线

问题描述 投票:1回答:1

在我的图表上(仅一条水平线),我想绘制第二条水平线。第二条线只是两个任意点之间的线。到目前为止,我还没有画出第二条线。第二行不呈现。非常感谢您的帮助。

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

);

javascript chart.js
1个回答
0
投票

如果为true,将在无数据或空数据的点之间绘制线条。如果为false,则带有spanGaps数据的点将在行中创建一个中断。

NaN
© www.soinside.com 2019 - 2024. All rights reserved.