提高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

在這里，您可以找到回答您問題的常見問題。

附加說明：在禁用工具提示時，您將獲得巨大的性能提升。

或者只使用已經實現了dataGrouping ，例如帶有52k點的圖表 。

Answer 2

我發現動畫可以影響大型數據集的圖表加載時間。 嘗試禁用動畫：

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

Answer 3

我有一個建議，但我不知道你是否喜歡這個。 我需要有多軸的圖表，每個軸有1440個數據點（在我的情況下它們只能是0或1）並且它們工作正常。 我必須做的是更改x軸數據類型並生成日期'manualy'。

使用日期在x軸上創建類別：

xAxis: {
    categories: ['00:00', '00:01', '00:02', '00:03',  ..., '23:59']

然后每個數據點的排序方式與類別相同：

series: [{
    data: [1, 1, 1, 1, 1, 1, ..., null]

我知道這很麻煩，但是當你這樣做時，你可以將數據數組減少到只有y軸值，並且渲染花費的時間更少。 見JSFiddle。