performance - HighCharts 性能随着 'chart' 和 'renderer' 一起急剧下降

Question

我想了解一下 HighCharts 的表现。比较这两个代码:

• 答:1000 rectangles with Renderer object ~50 毫秒
• 乙:1000 rectangles with Renderer and Chart objects ~500 毫秒

时间差大约是 10 倍，这是非常有线的。

我需要 chart.tooltip 来显示工具提示。所以我不能简单地使用代码A。但是为什么性能如此不同？如何编写更好的解决方案？

Answer 1

我在 Highcharts 中做了一些挖掘，结果证明是在 SVGElement.add 方法中处理 Z 索引导致速度变慢。解决方案是添加您自己的组，并将所有矩形添加到该组。那么无论将其添加到图表内部还是外部，性能都是一样的。

    var ren = chart.renderer;        
    var g = ren.g().add();

    for (var i = 0; i < 1000; i++) {
        ren.rect(i, i, 100, 100, 0).attr({ fill: '#FF0000' }).add(g);
    }

http://jsfiddle.net/highcharts/jxpSk/7/