'chart' 和 'renderer' 一起使用时，HighCharts 的性能会急剧下降

Question

我正在尝试对 HighCharts 的表现进行一些感受。比较这两个代码：

• 答：1000 rectangles with Renderer object ~50ms
• B：1000 rectangles with Renderer and Chart objects ~500ms

时间差约为 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/