Highcharts使用日期时间轴更新动画

Question

我在我的React 16.6应用程序中使用官方的highcharts-react-official包来渲染柱形图。我想在那里启用动画，对于初始动画，一切正常。但是当我更新我的数据（通过道具在配置中使用）时，我没有获得增长动画。我在这里使用datetime xAxis，这似乎是问题的一部分。

你可以在这里找到沙盒环境（请注意，甚至没有增长，但状态会正确更新？）：https://codesandbox.io/s/38xwxr81lp

Answer 1

性能Highcharts使用对原始数据数组的引用。在您的代码中，您编辑数据的第二级：lastColumn.value[1] += 100;，这会导致更新期间选项中没有任何更改。

这个例子提出了类似的情况：http://jsfiddle.net/BlackLabel/tf1csqeo/

解决方案是在修改数据之前克隆数据：

handleClick = () => {
  let newData = this.state.data.map(x => x.slice());

  if (newData[newData.length - 1][1] < 450) {
    newData[newData.length-1][1] += 100;

    this.setState(
      {
        data: newData
      }
    );
  }
};

现场演示：https://codesandbox.io/s/6xv0kr3v0n

如您所见，动画正常工作。