通过“图表”和“渲染器”，HighCharts性能会急剧下降

Question

我试图对HighCharts的表现有所了解。比较这两个代码：

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

时间差是~10x，非常有线。

我需要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/