javascript - 如何用chartjs实时显示多个图表

Question

我用Chartjs制作了一个实时更新数据的图表。我想同时显示多个图表，但无法很好地更新数据。我认为最好如果你能分别推送“a”和“b”的数据，如下面的代码所示。我想做一些类似 dataset.data [0] .push 的事情，但这不起作用(它是一个对象吗？)。有什么好的突破吗？

function onRefresh(chart) {
  for( var i=0; i<set.label.length; i++) {
  chart.config.data.datasets.forEach(function(dataset) {
    dataset.data.push({
      x: Date.now(),
      y: set.lebel[set.label.length-1]
    })
  });
 }
}

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'a',
      data: [],
      backgroundColor: '...',
      borderColor: '...',
    }, {
      label: 'b',
      data: [],
      backgroundColor: '...',
      borderColor: '...',
}]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'realtime',
        realtime: {
          refresh: 1000,
        }
      }],
      yAxes: [{
                type: 'linear',
                display: true,
        ticks: {
          beginAtZero: true,
        },
                scaleLabel: {
                    display: true,
                }
            }]
    },
    events: [],
    plugins: {
      streaming: {
        duration:  1000,
        delay: 1000,
    }
  }
}
});

Answer 1

datasets 是一个数组，因此它将是 dataset[0].data.push 而不是 dataset.data [0] .push

但是您的 forEach 正在循环遍历每个数据集，因此您只需检查它是否是您想要更新的数据集:

function onRefresh(chart) {
  for( var i=0; i<set.label.length; i++) {
  chart.config.data.datasets.forEach(function(dataset) {
    if (dataset.label === 'a') {
      // push the data to update a here
      dataset.data.push({
        x: Date.now(),
        y: set.lebel[set.label.length-1]
      })
    }
    // do the same for b
  });
 }
}