Canvas 画布上的highcharts极轴视图

我需要同时在极坐标图上显示大量系列'2000+，但在加载时间方面有严重问题。我认为画布可能是一种更好的方式，但在看了Highcharts热图画布示例后，我仍然在努力理解如何为极坐标图做到这一点

关于如何帮助处理加载时间，或者如何使用highcharts在canvas上实现这一点，有什么想法吗？我还没有关掉鼠标盖或下面小提琴的工具提示，但这些在生产版本中是不需要的

每个系列可以有稍微不同数量的数据点，这就是为什么我必须显式设置角度的原因

JS小提琴：

---

感谢您的帮助

HighchartsJS使用SVG来呈现图表，因此重新呈现到html画布将花费更长的时间而不是更短的时间。你看过ChartJS了吗？它有一个本地的画布极坐标图：……关于加载时间……你传输的是什么数据格式：JSON、XML、二进制……？谢谢，我来看看ChartJS。在一个示例中，Highcharts本身扩展了其库，用于渲染大量形状，而不是将数据点渲染为画布，而不是svg，以提高性能，这在我的文章中是第一位的。只是没有极坐标图的例子。ThanksOh和它的json I ajax在，也是一个问题，以禁用所有的动画，如感谢塞巴斯蒂安我会给一个尝试

$(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
    });
});