画布上的highcharts极地视图

Question

我需要同时在极坐标图表上显示大量系列（可能2000+），但是加载时间会非常严重。我认为画布可能是一个更好的方法，但在查看Highcharts热图画布示例（http://www.highcharts.com/demo/heatmap-canvas）之后，我仍然在努力了解如何为极坐标图做到这一点。

有关如何使用highcharts帮助加载时间或如何使用canvas进行此操作的任何想法？我没有为下面的小提琴调整鼠标悬停或工具提示，但在生产版本中不需要这些。

每个系列的数据点数量可能略有不同，这就是我必须明确设置角度的原因。

JS小提琴：http://jsfiddle.net/73jyxc57/

$(function () {

    var linedata = [[0,93],[5,93],[10,99],[15,105],[20,111],[25,117],[30,123],[35,129],[40,135],[45,141],[50,147],[55,153],[60,159],[65,165],[70,171],[75,176],[80,182],[85,188],[90,194],[95,200],[100,194],[105,188],[110,182],[115,176],[120,171],[125,165],[130,159],[135,153],[140,147],[145,141],[150,135],[155,129],[160,123],[165,117],[170,111],[175,105],[180,99],[185,93],[190,93],[195,99],[200,105],[205,112],[210,118],[215,124],[220,131],[225,137],[230,143],[235,150],[240,156],[245,162],[250,169],[255,175],[260,181],[265,188],[270,194],[275,200],[280,194],[285,188],[290,181],[295,175],[300,169],[305,162],[310,156],[315,150],[320,143],[325,137],[330,131],[335,124],[340,118],[345,112],[350,105],[355,99]];

    var seriesData = [];

    // build the data
    for (i = 0; i < 500; i++) { 
        seriesData.push ({
            "data": linedata
        });
    }

    // Create a timer
    var start = +new Date();

    $('#polarChart').highcharts({

        chart: {
            polar: true,
            events: {
                load: function () {
                    if (!window.isComparing) {
                        this.setTitle(null, {
                            text: 'Built chart in ' + (new Date() - start) + 'ms'
                        });
                    }
                }
            }
        },

        legend: {
            enabled: false,
        },

        title: {
            text: 'Highcharts Polar Chart'
        },

        pane: {
            startAngle: 0,
            endAngle: 360
        },

        xAxis: {
            tickInterval: 45,
            min: 0,
            max: 360,
            labels: {
                formatter: function () {
                    return this.value + '°';
                }
            }
        },

        yAxis: {
            min: 0
        },

        plotOptions: {
            series: {
                pointStart: 0,
                pointInterval: 45
            },
            line: {
                marker: {
                    enabled: false
                }
            }
        },
        series: seriesData
    });
});

感谢您的帮助