Question

我真的不知道该怎么办了。我正在开发web应用程序中的高价图表。数据加载正确，但只要我启用zoomType：图表选项中的'x'，我就会在缩放时出现错误。

我无法正确重现错误。但是，当我尝试沿着xAxis进行缩放并选择几乎所有在图表中显示的点时，它运行并缩放就好了。但是当我选择一小组点时，浏览器就会停止，直到Chrome关闭。在任务管理器中，我看到内存增加了1GB的RAM使用率。我在其他浏览器中测试过它并得到了同样的错误。我不处理xAxis上的事件 - 它只是放大和缩小。 highstockData.jsp只是一个包含许多时间戳的文件。

tldr：当我选择多个点时，它就可以了。当我选择几个点时，浏览器崩溃并且内存开始泄漏

更新：当我启用rangeSelector并单击1m时，它也会开始构建内存。但是当我等待额外的几分钟（最多5分钟）时，它会加载并且内存开始再次下降。

Update2：我尝试了一些调试。在我等了将近5分钟之后，我在chrome中制作了cpu使用情况配置文件的屏幕截图。 http://i.imgur.com/xmqhI.png它表示近80％的cpu使用量被getnonlineartimeticks使用。

解决方案：仅供其他人参考。它已经解决了。问题是

xAxis : {
     tickInterval : 4
  },

在一个小的tickInterval上强制使用xAxis会导致所有麻烦......

这里有一些代码：

function initHighstock() {
options = {
    chart : {
        zoomType : 'x',
        renderTo : 'highstockContainer'
    },
    plotOptions : {
        series : {
            lineWidth : 0,
            marker : {
                enabled : true,
                radius : 3
            },
        }
    },
    navigator : {
        enabled : false
    },
    yAxis : {
        min : 0,
        max : 24,
        tickInterval : 4
    },
    xAxis : {
        tickInterval : 4
    },
    tooltip : {
    shared : false,
        formatter : function() {
            return '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>' + '<br/>' + 'Time of day: '
                    + this.y;
        }
    },
    rangeSelector : {
        enabled : true
    },
    title : {
        text : 'Diary'
    },
    series : []
};

$.get('highstockData.jsp', function(data) {
    // Split the lines
    var lines = data.split(';');
    var series = {
        data : []
    };

    for ( var k = 0; k < lines.length; k++) {
        if (lines[k].length > 0) {
            var line = lines[k];
            var items = line.split(',');

            var myDate = new Date(Math.round(items[0] * 1000));
            series.data.push([ parseInt(Math.round(myDate.getTime())),     parseInt(Math.round(myDate.getHours())) ]);
            myDate = null;
        }
    }
    series.data.sort(function(x, y) {
        return x[0] - y[0];
    });

    options.series.push(series);
    // Create the chart
    var chart1 = new Highcharts.StockChart(options);
    chart1.redraw();

});
};

Answer 1

解决方案：仅供其他人参考。它已经解决了。问题是：

xAxis : {
 tickInterval : 4
 },

在一个小的tickInterval上强制xAxis会导致所有麻烦。

Answer 2

请使用最新版的Highchart。通常这种问题是由于紧凑（缩小）的js文件而产生的。使用highstock.src.js文件而不是highstock.js

Highstock |放大xAxis会导致浏览器崩溃

2 个答案: