Question

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

您可以在此处找到沙盒环境（请注意，甚至没有增长，但是状态是否已正确更新？）：https://codesandbox.io/s/38xwxr81lp

Answer 1

高性能图表使用对原始数据数组的引用。在您的代码中，您将编辑第二级数据：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

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

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

1 个答案: