如何使用Chart.js在连续线图中实现不连续的部分（跳跃）？

Question

我使用Chart.js绘制折线图。我不想重新缩放x轴以获取更多采样点。

如果y轴值不连续更改，呈现跳转的最佳方法是什么？

理想情况下，我将能够为每个x值定义两个y值。因此，假设我为{datasets: [{data : []}]}传入的数据数组为[1, 2, 4, 5]，且IDx为1，则我想将其定义为[1, [2, 3], 4, 5]。

Answer 1

您在这里：https://jsbin.com/kacecejade/1/edit?js,output

我遍历数据数组，当没有数字而是数组时，我将标签数组中的数组元素加倍，所以我有两个数据标签。

var sLabels = ['2018-10-26', '2018-11-02', '2018-11-09', '2018-11-16', '2018-11-23', '2018-11-30', '2018-12-07', '2018-12-14', '2018-12-20', '2018-12-28', '2018-12-31', '2019-01-01', '2019-01-04', '2019-01-11', '2019-01-18']
var sData = [-4.43, [-3.47, -3.34], -3.62, [-4.20, -3.70], -4.04, -3.75, -4.46, -4.50, -4.50, -4.50, -4.05, [-3.76, -3.64], [-3.38, -3.09], -3.24, -2.88]

function formatData() {
  var newLabels = []
  var newData = []
  for (var i = 0; i < sLabels.length; i++) {
    if (Array.isArray(sData[i])) {
      for (var j = 0; j < sData[i].length; j++) {
        newLabels.push(sLabels[i])
        newData.push(sData[i][j])
      }
    } else {
      newLabels.push(sLabels[i])
      newData.push(sData[i])
    }
  }
  return [newLabels, newData]
}

var [labels, datasetData] = formatData()

var data = {
  labels: labels,
  datasets: [{
    data: datasetData,
    lineTension: 0
  }]
}