提高Highcharts折线图的性能

Question

I'm using Highcharts to create a zoomable line chart that has 1440 data points, here's a JSFiddle demo thereof.

In Firefox, the performance of the chart is very sluggish, it takes several seconds to render, and there's a long delay between hovering over a datapoint and the tooltip appearing. On my page there are several such charts and their combined impact makes the page almost unusable.

Are there any tricks/tips for improving the performance of charts that have relatively large data sets? I've appended the chart's JSON to the end of this post (with the data itself truncated).

Incidentally, before I added the turboThreshold: 0 property the chart didn't render at all because the series has more than 1000 data points. According to the docs :

When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 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
        }]
    });
});

Update

I've updated the demo to include all suggestions I've received so far. Disabling animations helped a bit, but the page is still very sluggish in Firefox (which is the main browser I'm targeting). I've started a bounty in the hope of attracting further suggestions.

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

I have found that animation can impact chart load times for large data sets. Try disabling animation:

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

Answer 3

I have a suggestion, but I dont know if you like this. I needed charts with multiple axis and every axis has 1440 datapoints (they can only be 0 or 1 in my case) and they work fine. What I had to do for this is to change the x-axis datatype and generate the date 'manualy'.

Create categories on the x-axis with the date:

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

Then every datapoint is ordered the same as the category:

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

I know this is messy but when you do this you can reduce the data array to just the y-axis value and the rendering takes less time. See JSFiddle.