Question

我使用Highcharts创建了一个包含1440个数据点的可缩放折线图，这里有JSFiddle demo个。

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

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

顺便说一下，在我添加turboThreshold: 0属性之前，图表根本没有呈现，因为该系列有超过1000个数据点。根据{{3}}：

当一个系列包含一个比这长的数据数组时，只允许一维数字数组或具有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
        }]
    });
});

更新

我the docs包括我目前收到的所有建议。禁用动画有点帮助，但Firefox中的页面仍然非常缓慢（这是我目标的主要浏览器）。我已经开始获得赏金，希望能够吸引更多的建议。

Answer 1

您可以在此处找到FAQ来回答您的问题。

补充说明：在禁用工具提示时，您将获得巨大的性能提升。

或者只使用已实施dataGrouping的Highstock，例如chart with 52k of points。

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轴值，渲染花费的时间更少。 See JSFiddle.

提高Highcharts折线图的性能

更新

3 个答案: