在Highcharts朝阳中添加图例

thtygnil 于 2023-10-20 发布在 Highcharts

关注(0)|答案(1)|浏览(174)

我试图在Highcharts朝阳中添加一个动态图例（如饼图）。下面的代码正是我所需要的：https://jsfiddle.net/BlackLabel/x2hL8tqo/
我的问题是，当我有很多数据（近500点），浏览器挂起时，我在图例中的一个项目点击。你可以在这里看到演示（点击后等待一分钟，然后对Chrome警报回答“是”以查看结果）：https://jsfiddle.net/vegaelce/py5q7ozv/
更新功能似乎是瓶颈：

p.update({
        oldValue: p.value ? p.value : p.oldValue,
        value: p.value ? null : p.oldValue
});

有没有什么方法可以优化代码，让函数处理大量数据？
谢谢.

highcharts

来源：https://stackoverflow.com/questions/77022113/adding-a-legend-in-highcharts-sunburst

1条答案

按热度按时间

jhdbpxl91#

legendItemClick逻辑在每次点编辑后都会重新绘制（这是默认设置）。这会导致延迟/挂起。如果您使用update(options [, redraw] [, animation])（API）的第二个参数不重绘单个更新，而是在所有更新后从图表中重绘，那么应该会快得多。
示例编辑legendItemClick：

legendItemClick() {

    this.series.points.forEach(p => {
        if (p.color === this.color) {
            p.update({
                oldValue: p.value ? p.value : p.oldValue,
                value: p.value ? null : p.oldValue
            }, false);
        }
    });
    this.series.chart.redraw(false);

}

请注意point.update如何使用false进行重绘。以this JSFiddle为例。
如果你想要一个有变化的动画，你可以将chart.redraw的参数设置为true。

赞(0）回复(0）举报 2023-10-20

我来回答

在Highcharts朝阳中添加图例

1条答案

相关问题

热门标签

最新问答