Highcharts饼图在刷新时失去颜色

Question

highcharts：8.0.4

我创建了一个jsfiddle 来演示正在发生的事情，显示饼图和条形图以及它们的行为方式有何不同。在我的场景中，图表是在没有数据的情况下实例化的。然后从 api 请求数据（通过单击按钮在 jsfiddle 中对此进行模拟）。图表显示，然后数据被刷新（再次单击按钮）。您应该注意到饼图“消失”，而条形图没有。我猜这是因为“颜色”属性设置为 null。

我的问题是为什么饼图的行为与条形图不同？

在我的场景中，我可能有也可能没有从 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();
})

1. 在 setData 中将 updatePoints 标志设置为 false - 这就是发生错误的原因。

演示：https://jsfiddle.net/BlackLabel/umo14be0/

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