javascript - Highcharts:一次更新多个系列，以获得更流畅的动画

Question

我有一个包含三个系列的 highcharts 样条图:

series: [
  {
    name: "item1",
    data: []
  },
  {
    name: "item2",
    data: []
  },
  {
    name: "item3",
    data: []
  }
];

我定期获取新数据，然后使用Series.setData依次更新每个系列。函数，像这样:

function update(data) {
  const s = myChart.series;
  for (let i = 0; i < s.length; i++) {
    s[i].setData(data[s[i].name]);
  }
}

其中data是一个像这样的对象:

data = {
  'item1': [1, 2, 3],
  'item2': [1, 2, 3],
  'item3': [1, 2, 3]
}

我更愿意一次更新所有数据，但这似乎不可能。当我像这样快速连续更新所有三个系列时，动画非常不稳定。

Answer 1

我找到了一个似乎不错的解决方案:

function update(data) {
  const s = myChart.series;
  for (let i = 0; i < s.length; i++) {
    console.log(i);
    s[i].setData(data[s[i].name], false);  // add "redraw=false" argument
  }
  myChart.redraw(); // trigger redraw at end of loop
}

将 false 添加到 setData 函数可防止 Highcharts 在每次更改后重新绘制。当我到达循环末尾时，我手动触发重绘。

这使得更新更加顺利!