Highcharts p ie диаграмма теряет цвет при обновлении

Question

highcharts: 8.0.4

Я создал jsfiddle , чтобы продемонстрировать, что происходит, показать ap ie и гистограмму и то, как они ведут себя по-разному. В моем сценарии диаграмма создается без данных. Затем данные запрашиваются из API (смоделируйте это в jsfiddle, нажимая кнопки). Диаграммы отображаются, затем данные обновляются (снова нажмите кнопки). Вы должны заметить, что график p ie «исчезает», а гистограмма - нет. Я думаю, это потому, что для свойства «color» задано значение null.

Мой вопрос: почему график p ie ведет себя иначе, чем гистограмма?

В моем сценарии I может иметь или не иметь значение "color", возвращаемое из API. Я придумал решение условно добавить свойство, только если оно имеет значение:

data.map((d) => {
  if (d.color) {
    return (
      {
        name: d.group,
        y: d.value,
        color: d.color,
        id: d.id,
      });
  }
  return (
    {
      name: d.group,
      y: d.value,
      id: d.id,
    });
});

Однако, похоже, это работает (вот мой второй вопрос), есть ли лучший способ сделать это? это?

Answer 1

Для этого конкретного случая использования:

1. Вы можете использовать обновление вместо функции setData .

Демонстрация: https://jsfiddle.net/BlackLabel/1bjfh63c/

Код:

button1.addEventListener('click', function() {
    let x = Math.floor(Math.random() * (99)) + 1;
    let y = Math.floor(Math.random() * (99)) + 1;
  chart1.series[0].setData(
        [{
            y: x,
        name: 'Apple',
        color: null,
        id: 1,
      },
      {
            y: y,
        name: 'Peach',
        color: null,
        id: 2,
      }
    ], false, false, false);

  chart1.redraw();
})

В setData установите флаг updatePoints в значение false - вот почему произошла ошибка.

демо: https://jsfiddle.net/BlackLabel/umo14be0/

API: https://api.highcharts.com/class-reference/Highcharts.Series#setData