Highstock |放大xAxis会导致浏览器崩溃 [英] Highstock | Zooming on xAxis causes Browser Crash

问题描述

我真的不知道该做什么了。我正在开发一个我的web应用程序中的高端图表。数据正确加载，但只要启用zoomType：图表选项中的'x'，我开始在缩放时出错。

我无法再现错误正确。但是，当我尝试缩放xAxis并选择几乎所有在图表中显示的点时，它都会运行并放大。但是，当我选择较小的一组点时，浏览器会停止，直到停用Chrome。在任务管理器中，我看到内存构建高达1GB的内存使用量。我在其他浏览器中测试过，并得到相同的错误。我不处理xAxis上的事件 - 只是放大和缩小。
highstockData.jsp只是一个包含许多时间戳的文件。

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

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

Update2：我试着再调试一次。我等了将近5分钟后，我在Chrome中对cpu使用情况进行了截图。 http://i.imgur.com/xmqhI.png 它说近80％的getnonlineartimeticks使用cpu使用。

解决方案：仅供参考。它已经解决了。问题在于 $ b

  xAxis：{
 tickInterval：4 
}，
  code> 

在小tickInterval上强制xAxis导致所有麻烦......

<



 函数initHighstock（）{
 options = {
图：{ 
 zoomType：'x'，
 renderTo：'highstockContainer'
}，
 plotOptions：{
 series：{
 lineWidth：0，
标记：{
启用：true，
 radius：3 
}，
} 
}，
导航器：{
启用：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 />'+'时间：'
 + this.y; 
} 
}，
 rangeSelector：{
 enabled：true 
}，
 title：{
 text：'Diary'
}，
系列：[] 
}; 
 
 $ .get（'highstockData.jsp'，function（data）{
 //分割行
 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）; 
 //创建图表
 var chart1 = new Highcharts .StockChart（options）; 
 chart1.redraw（）; 
 
}）; 
}; 
  




解决方案

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



  xAxis：{
 tickInterval：4 
}，
  

在小tickInterval上强制xAxis导致所有问题。

I really don't know what to do anymore. I am developing a highstock chart in my webapplication. the data is loaded correctly but as soon as i enable the zoomType : 'x' in the Chart options i start to get an error at zooming.

I can't reproduce the error properly. But when i try to zoom along the xAxis and select nearly every point which is displayed in the chart it runs and zooms just fine. But when i select a smaller group of points the browser just stops until chrome shuts down. In the task manager i see memory building up to 1GB of RAM usage. i tested it in other browsers and got the same error. I don't handle the events on the xAxis - it's just to zoom in and out. The highstockData.jsp is just a file with many timestamps.

tldr: when i select many points, it goes just fine. when i select just a few points, the browser crashes and memory starts leaking

Update: When i enable the rangeSelector and click on 1m it starts to build up memory too. But when i wait additional minutes ( up to 5 minutes) it loads and the memory starts to go down again.

Update2: I tried debugging it some more. i made a screenshot of the cpu usage profile within chrome after i waited nearly 5 minutes . http://i.imgur.com/xmqhI.png it says that nearly 80% of the cpu usage is used by getnonlineartimeticks.

Solution: Just for the information of others. it's resolved. The problem was the

xAxis : {
     tickInterval : 4
  },

Forcing the xAxis on a small tickInterval caused all the troubles...

here is some code:

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

});
};

解决方案

Solution: Just for the information of others. it's resolved. The problem was the:

xAxis : {
 tickInterval : 4
 },

Forcing the xAxis on a small tickInterval caused all the troubles.

这篇关于Highstock |放大xAxis会导致浏览器崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！