Highcharts饼图在刷新时会失去颜色

问题描述 投票:0回答:1

高图: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,
    });
});

这似乎确实有效,但是(这是我的第二个问题),有没有更好的方法?

javascript charts highcharts
1个回答
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

© www.soinside.com 2019 - 2024. All rights reserved.