重绘究竟做了什么?

时间:2013-02-16 21:11:02

标签: highcharts

更改图表上的某些内容时,例如myChart.addSeries(mySeriesObj)

myChart.get("myPointId').update(50);默认行为是调用重绘函数。

现在,假设我在该图表上有3个系列(seriesA,seriesB,seriesC),我刚刚更新了seriesA中的 1分。它会非常快速地重绘所有图表(seriesA,seriesB,seriesC,axises,label等)吗?或者只是新点?

Highchart是否适用于图层,或者所有图标都在同一个“框架”中?

我问这个是因为我打算使用超过1000分的系列,我知道在Highchart上使用大数据时可能存在一些性能问题。(我已经看到,当启用 marker.states.hover 选项或工具提示选项)

4 个答案:

答案 0 :(得分:2)

根据我的理解,Highcharts很可能只会重绘脏组件(在您的情况下,该点所属的系列)。

chart.redraw()来源的一些零碎看起来像

// redraw affected series
each(series, function (serie) {
    if (serie.isDirty && serie.visible &&
            (!serie.isCartesian || serie.xAxis)) { // issue #153
        serie.redraw();
    }
});

当您拨打point.update()时,只有该点所属的系列标记为脏。因此,在下一个chart.redraw()调用时重新绘制,而其他未更新点的系列将不会重新绘制。

话虽如此,除了上述内容之外,chart.redraw()还有其他一些代码。主要用于重绘轴和图例等东西。看起来大多数都是基于类似的isDirty逻辑重新绘制的,因此不应该是性能威慑。但是,如果性能确实是一个关键因素,您可以使用第二个参数point.update()调用false,这将跳过隐式chart.redraw()调用,因此内部的所有内容。然后,您可以明确地调用要更新的特定系列上的series.redraw()方法(该点属于该系列)。
注意:这不会重绘轴(和其他东西),如果点的更新值超出当前轴的极值,则可能需要重新绘制这些轴。此外,文档中未列出series.redraw(),可能表示不鼓励使用它,并可能产生意外结果。
我会在99%的情况下采用chart.redraw()方式,因为大多数时候表现都是高度可接受的。

<强>参考文献:
point.update() api reference
Demo @ JsFiddle

答案 1 :(得分:1)

来自源代码:

/**
 * Redraw legend, axes or series based on updated data
 *
 * @param {Boolean|Object} animation Whether to apply animation, and optionally animation
 *    configuration
 */
 redraw: function (animation) {

答案 2 :(得分:0)

我在使用Highchart性能加载方面遇到了一些问题&gt; 1000点健身数据系列(如心率,速度等)。我发现在情节Highcharts example中禁用标记会带来非常显着的性能提升。我也禁用了动画。

我在我的解决方案上运行了chrome profiler,发现在准备渲染时调用了highcharts.src.js中的每个函数。

    this.each =
            //Array.prototype.forEach ?
        //  function (arr, fn) { // modern browsers
        //      return Array.prototype.forEach.call(arr, fn);

        //  } : 
            function (arr, fn) { // legacy
                var i = 0, 
                    len = arr.length;
                for (; i < len; i++) {
                    if (fn.call(arr[i], arr[i], i, arr) === false) {
                        return i;
                    }
                }
            };

我听说forEach比for循环慢,所以我已经注释掉了forEach的默认选择。在jsperf for vs foreach上进行测试,在我的机器环境中显示foreach比最快的反向循环慢85%

答案 3 :(得分:0)

您还可以使用point update()函数http://api.highcharts.com/highstock#Point.update()