代码之家  ›  专栏  ›  技术社区  ›  Dustin Michels

Highcharts:一次更新多个系列,以获得更平滑的动画效果

  •  0
  • Dustin Michels  · 技术社区  · 7 年前

    我有一个包含三个系列的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]
    }
    

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

    2 回复  |  直到 7 年前
        1
  •  1
  •   Dustin Michels    7 年前

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

    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

        2
  •  0
  •   cesarcosta99    7 年前

    你可以这样做:

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