Highcharts悬停延迟而不是使用多个系列渲染

时间:2017-06-20 17:20:39

标签: javascript highcharts

作为免责声明,我对JS很新。话虽这么说,我有多个系列,我从数据库加载到Highcharts。如果加载单个系列,图表呈现正常并且响应迅速。加载多个系列后,数据的十字准线在悬停时会大幅延迟,并且图表甚至无法在Chrome屏幕上呈现(版本59.0.3071.104(官方版本)(64位)),除非我放大相当一点点。然而,它将在Firefox和IE中呈现,但响应时间较慢。它还可以在所有浏览器上保存到磁盘。

图表是简单的线条,每行包含大约33k个数据点。我使用一些简单的php函数来遍历数据集并生成脚本。

<div id="container" style="width: 1200px; height: 600px; margin: 0 auto"></div> 

        <!-- 1. Add JQuery and Highcharts in the head of your page -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>

        <!-- 2. You can add print and export feature by adding this line -->
        <script src="http://code.highcharts.com/modules/exporting.js"></script>

        <script src="https://code.highcharts.com/highcharts.js"></script>

        <script src="https://code.highcharts.com/modules/exporting.js"></script>


        <script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://code.highcharts.com/stock/highstock.js"></script>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>


        <script>
            exporting:{
                            url:"http://localhost:8080/highcharts-export-web/"
                        };

                var chart = Highcharts.chart("container", {
                                chart: {
                                    zoomType: "x",
                                    panning: true,
                                    panKey: "shift",
                                    //~ plotShadow: true,
                                    plotBorderWidth: 1

                                },
                                tooltip: { enabled: false},
                                title: {
                                    text: "Experiments"
                                },


                                yAxis: {
                                    minorTickInterval: "auto",
                                    lineColor: "#000",
                                    lineWidth: 1,
                                    tickWidth: 1,
                                    tickColor: "#000",
                                    crosshair: {
                                        color: "blue",
                                    },
                                    title: {
                                        text: "Y",


                                    }
                                },

                                xAxis: {
                                    //type: "datetime",
                                    minorTickInterval: "auto",
                                    lineColor: "#000",
                                    lineWidth: 1,
                                    tickWidth: 1,
                                    tickColor: "#000",
                                    crosshair: {
                                        color: "blue",
                                    },
                                    title: {
                                        text: "X",
                                    },


                                },
                                legend: {
                                    layout: "vertical",
                                    align: "right",
                                    verticalAlign: "middle"
                                },

                                series : []


                            });






        $.getJSON('./from-sql.php?callback=data&zone=1055&ma=120', function(data) {


        chart.addSeries({
            data: data.data,

            });

    });


        $.getJSON('./from-sql.php?callback=data&zone=1056&ma=120', function(data) {


        chart.addSeries({
            data: data.data,

            });

    });


        $.getJSON('./from-sql.php?callback=data&zone=1&ma=120', function(data) {


        chart.addSeries({
            data: data.data,

            });

    });
    </script>

我不会认为33k点是一个巨大的数字,而且我默认启用了数据分组,我认为这会有所帮助。我过去曾经有渲染问题,禁用工具提示似乎解决了这个问题。我是在做一些内在错误并使其变慢的事情吗?

提前感谢任何建议和/或提示。

1 个答案:

答案 0 :(得分:0)

33k足以降低性能。使用特殊的图表组,例如Master-detail chartHighstock series