Question

高位图表：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

对于此特定用例：

您可以使用更新而不是 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

Highcharts饼形图刷新后颜色消失

1 个答案: