提高Highcharts折线图的性能

Question

我正在使用Highcharts创建一个包含1440个数据点的可缩放折线图,这是一个JSFiddle演示.

在Firefox中,图表的性能非常缓慢,渲染需要几秒钟,并且在数据点上方悬停和出现工具提示之间存在很长的延迟.在我的页面上有几个这样的图表,它们的综合影响使页面几乎无法使用.

是否有任何技巧/提示可以改善具有相对较大数据集的图表的性能？我已将图表的JSON附加到此帖的末尾(数据本身被截断).

顺便说一下,在我添加turboThreshold: 0属性之前,图表根本没有渲染,因为该系列有超过1000个数据点.根据文件:

当一个系列包含一个比这长的数据数组时,只允许一维数字数组或具有x和y值的二维数组.此外,仅测试第一个点,并假设其余的格式相同.这样可以长时间地节省昂贵的数据检查和索引.将其设置为0禁用.默认为1000.

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'line',
            marginRight: 10,
            zoomType: 'x'
        },

        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            labels: {
                formatter: function () {
                    return currencySymbol + this.axis.defaultLabelFormatter.call(this);
                }
            },

            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + currencySymbol + Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            series: {
                states: {
                    hover: {
                        lineWidthPlus: 0
                    }
                },
                lineWidth: 1,
                marker: {
                    enabled: false,
                    radius: 3
                }
            }
        },
        series: [{
            data: [{"y":93,"x":1412722800000},{"y":54,"x":1412722860000}],
            turboThreshold: 0
        }]
    });
});

更新

我已经更新了演示,以包含我目前收到的所有建议.禁用动画有点帮助,但Firefox中的页面仍然非常缓慢(这是我目标的主要浏览器).我已经开始获得赏金,希望能够吸引更多的建议.

Answer 1

Here you can find FAQ answering your question.

Additional note: Big performance boost you will get while disabling tooltip.

Or just use Highstock, which has implemented dataGrouping, for example chart with 52k of points.

Answer 2

我发现动画可以影响大型数据集的图表加载时间.尝试禁用动画:

plotOptions: {
    series: {
        animation:false,
        states: {
            hover: {
                lineWidthPlus: 0
            }
        }
    }
},