Phonegap应用程序放慢了11个不同的图表

时间:2015-04-29 19:31:17

标签: javascript canvas

问题:

我遇到的问题是我有11个不同的图表同时运行(在后台),这会减慢在phonegap中创建的整个应用程序。我很困惑,不知道我应该做些什么才能使应用程序更快地运行。我相信线程是解决方案,或者我只需要一次只运行一个图表并保持其余部分死亡(死亡=直到选中才接收数据)。

我正在处理的项目的简短描述:

我基本上使用canvas.js(canvas website)来浏览11个不同的图表,这些图表将分别接收随机生成的值。我正在使用jQuery来浏览图表。用户决定他/她想要查看哪个图表,一次只能查看一个图表。

这是jQuery代码,允许用户浏览11个不同的表:

$('[data-row]').on('click', function() {
    var row = $(this).attr('data-row');
     $('.active').removeClass('active');
     $('#table' + row).addClass('active');
});  

这是11个不同图表中的一个图表。

$(window).on("load", function() {
            var dps1 = []; // TB1S1

            var chart = new CanvasJS.Chart("table12",
            { 
              title:{
                text: "Ethanol Content"  
            },

            axisX:{
                title: "Current Time",         

            },
            axisY: {
                title: "Ethenol Content (%)",
             },
              data: [
              {     
                type: "spline",
                showInLegend: "true",
                legendText: "Ethenol Content",
                dataPoints: dps1
              }],
              legend: {
                cursor: "pointer",
                itemclick: function (e) {
                    if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                        e.dataSeries.visible = false;
                    } else {
                        e.dataSeries.visible = true;
                }
                chart.render();
                }
            }

            });

            var xVal = 0; 
            var updateInterval = 1000; 
            var dataLength = 100; 

            var updateChart = function (count) {
                count = count || 1;
            // count is number of times loop runs to generate random dataPoints.

                for (var j = 0; j < count; j++) {   
                    dps1.push({
                        x: xVal,
                        y: y35
                    });
                    xVal++;     
                }; 

                // When handling real data, put dps1,2,3,4,5,6,7,8 inside the if statement. 
                if (dps1.length > dataLength )
                {
                    dps1.shift();            
                }

                chart.render();     
            };

            // generates first set of dataPoints
            updateChart(dataLength); 

            // update chart after specified time. 
            setInterval(function(){updateChart()}, updateInterval); 
    });

我希望这里的信息是可以理解的。

亲切的问候 Dler H。

0 个答案:

没有答案