Question

我有一个包含三个系列的高图样条图：

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在每次更改后重绘。循环结束时，我会手动触发重绘。

这使更新更加顺畅！

Answer 2

您可以这样做：

const receivedData = {
  'item1': [1, 2, 3],
  'item2': [1, 2, 3],
  'item3': [1, 2, 3]
};

const update = data => Object.keys(data).map(key => ({ name: key, data: data[key] }));

console.log(update(receivedData));

高图：一次更新多个系列，以获得更流畅的动画

2 个答案: