javascript - 如何用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
  }]
}