Highcharts: обновить несколько серий одновременно, для более плавной анимации

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));