高图: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,
});
});
这似乎确实有效,但是(这是我的第二个问题),有没有更好的方法?
对于此特定用例:
演示: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();
})
演示:https://jsfiddle.net/BlackLabel/umo14be0/
API:https://api.highcharts.com/class-reference/Highcharts.Series#setData