HighCharts Boost模块和大数据集

时间:2017-08-22 07:54:41

标签: javascript highcharts

我不能将HighCharts Boost模块与大数据集一起使用。当用户单击图例以启用/禁用系列元素时,它无法动态刷新绘图。删除Boost解决了这个问题 - 当然,这会让情节变得更加缓慢......这是一个使用13000多个数据点重现问题的Plunker。

https://plnkr.co/edit/unpcS3Dt0Fh6dknq2ykX?p=preview

有什么不对吗?有人也有这个问题吗?

<html>

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge;" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />
    <title>Demo</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/boost.js"></script>
    <script type="text/javascript" src="dataset.js"></script>
    <script type="text/javascript">

        function hcPlot(xy, title, xlabel, ylabel) {

            $('#theplot').highcharts({
                credits: {
                    enabled: false
                },
                chart: {
                    type: 'line',
                    zoomType: 'xy'
                },
                title: {
                    text: title
                },
                yAxis: {
                    title: {
                        text: ylabel
                    },
                    gridLineWidth: 1,
                    startOnTick: true,
                    endOnTick: true,
                    labels: {
                        formatter: function () {
                            if (this.value != 0 && (this.value > 1.e4 || this.value < 1.e-4)) {
                                return this.value.toExponential();
                            } else {
                                return this.value;
                            }
                        }
                    }
                },
                xAxis: {
                    title: {
                        text: xlabel
                    },
                    gridLineWidth: 1,
                    startOnTick: true,
                    endOnTick: true,
                    labels: {
                        formatter: function () {
                            if (this.value != 0 && (this.value > 1.e4 || this.value < 1.e-4)) {
                                return this.value.toExponential();
                            } else {
                                return this.value;
                            }
                        }
                    }
                },
                plotOptions: {
                    line: {
                        lineWidth: 1
                    },
                    series: {
                        animation: false,
                        enableMouseTracking: true,
                        marker: {radius: 2},
                        //step: 'center'
                    }
                },
                tooltip: {
                    formatter: function () {
                        var x = this.x;
                        var y = this.y;
                        if (x != 0 && (x > 1.e4 || x < 1.e-4)) {
                            x = x.toExponential(6);
                        }
                        if (y != 0 && (y > 1.e4 || y < 1.e-4)) {
                            y = y.toExponential(6);
                        }
                        return '(<b>' + x + '</b>, <b>' + y + '</b>)';
                    }
                },
                series: xy
            });

        }

        $(document).ready(function () {
            var title = 'Demo';
            var xlabel = '_xlabeltochange_';
            var ylabel = '_ylabeltochange_';
            hcPlot(dataset, title, xlabel, ylabel);
        });

    </script>
  </head>

  <body>
    <div id="theplot" class="plot" style="height: calc(100vh - 60px);"></div>
  </body>

</html>

1 个答案:

答案 0 :(得分:1)

这很可能是v5.0.13中引入的错误。我在这里报告:https://github.com/highcharts/highcharts/issues/7089。在修复之前,您可以使用旧版本(例如v5.0.12)。

例:
https://plnkr.co/edit/XJrfLVGSrnZ4oc3ezUfk?p=preview