图表间隔越来越慢(Canvas.JS)

时间:2015-05-08 14:17:02

标签: javascript jquery performance

我遇到的问题是,当我点击通过JQuery事件点击查看图表时,图表工作快速而顺利,但如果我双击或点击10次,每次点击图表运行越来越慢。也就是说,点击取决于图表性能。我相信$.getscript()导致了这种低性能或糟糕的JQuery代码..

下面的JQuery事件负责显示图表。请记住,用户具有在图表之间导航的机会,他们只能查看一次图表。

  $('[data-row]').on('click', function() {
  var row = $(this).attr('data-row'); 
  $('.active').removeClass('active'); // Displaye:none
  $('#table' + row).addClass('active'); // Display:block

             if(row == 1){
                $.getScript("diagram1.js"); // Display diagram1 
             } else {

             }
        }); 

这是 diagram1.js。

(function (){ 
 $(document).ready(function(){

        var dps = []; // data

        var chart = new CanvasJS.Chart("diagram1 ",
        { 
          title:{
            text: "Exhaust Temperature"  
          data: [
          {        
            type: "spline",
            name: "Temp Cylinder 1",
            showInLegend: "true",
            legendText: "Temp Cylinder 1",
            dataPoints: dps1
          }
        });

        var xVal = 0; 
        var updateInterval = 50; 
        var dataLength = 50; 

    var updateChart = function (count) {
            count = count || 1;
            for (var j = 0; j < count; j++) {    
                dps.push({
                    x: xVal,
                    y: EXTS[1]       
                });
                xVal++;
            }; 
            if (dps.length > dataLength )
            {
                dps.shift();             
            }
            chart.render();    
        };
        // generates first set of dataPoints
        updateChart(dataLength); 
        // update chart after specified time. 
        setInterval(function(){updateChart()}, updateInterval); 
 });  
}());

0 个答案:

没有答案