Highcharts React обновляет анимацию с осью дата-время

Question

Я использую официальный пакет highcharts-react-official в своем приложении React 16.6 для отображения диаграммы столбцов .Я хочу включить анимацию там, и для начальной анимации все работает отлично.Но когда я обновляю свои данные (используемые в конфигурации через реквизит), я не получаю анимацию роста.Я использую 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

Как видите, анимация работает правильно.