jqPlot을 사용한 라이브 차트 : 성능 문제

Question

프로젝트의 경우 jqPlot을 사용하여 라이브 업데이트 차트를 구현해야합니다.

다음 jsFiddle를 참조하십시오 http://jsfiddle.net/fracu/HrZcj/242/ 나는 성공적으로 일을 관리

(편의상의 값은 무작위로 생성),하지만 난 성능 문제에 봉착 : 차트 일부 분 후 브라우저의 실행은 차트의 탭을 닫을 때까지 느리게 시작됩니다. (파이어 폭스와 크롬으로 테스트 됨)

나는 특별한 일을하지 않으므로 차트의 값이 저장되는 배열로 매초마다 차트를 리포팅하기 때문에 문제가 어디 있는지 알 수 없다.

내가 가지고있는 또 다른 문제는 x 축의 크기를 조정할 때 "틱"이 차트의 왼쪽에 위치하며 축을 따라 똑같이 분산되지 않는다는 것입니다.

제발 내가 할 수있는 일에 대한 단서를 주시겠습니까?

미리 감사드립니다.

자바 스크립트 :

var plot1 = $.jqplot('chart1', [new Array(1)], { 
     series: [{yaxis:'y2axis',showMarker:true,fill:false,neighborThreshold:3,rendererOptions:{smooth:true}}], 
     axes: { 
      xaxis: {renderer: $.jqplot.DateAxisRenderer,tickOptions:{formatString:'%H:%M:%S'}}, 
      y2axis:{tickOptions:{formatString:'%.2f'}} 
     }, 
    }); 

    var myData = [], x, y, samples = 0, secsBuffer = 60, refreshInterval = 1, sampleWindow = secsBuffer/refreshInterval; 

    $("#refreshInterval").change(function() { 
     clearInterval(cInt); 
     cInt = window.setInterval(updateSeries, $("#refreshInterval").val() * 1000); 
     refreshInterval = $("#refreshInterval").val(); 
     sampleWindow = secsBuffer/refreshInterval; 
    }); 

    $("#secsBuffer").change(function() { 
     secsBuffer = $("#secsBuffer").val(); 
     sampleWindow = secsBuffer/refreshInterval; 
    }); 

    function updateSeries() { 
     if (samples > sampleWindow) { 
      var diff = samples - sampleWindow; 
      myData.splice(0, diff); 
      samples -= diff; 
     } 
     x = (new Date()).getTime(); 
     y = Math.floor(Math.random() * 100); 
     myData.push([x, y]); 

     plot1.resetAxesScale(); 
     plot1.axes.xaxis.numberTicks = 15; 
     plot1.axes.y2axis.numberTicks = 15; 
     plot1.axes.xaxis.min = x - (secsBuffer * 1000); 
     plot1.axes.xaxis.max = x; 
     plot1.series[0].data = myData; 
     plot1.replot(); 
     samples++; 
    } 
    cInt = window.setInterval(updateSeries, refreshInterval * 1000); 

Answer 1

나는이 플로팅 처리 및 더 많은 데이터가 몇 시간 후 브라우저 속도가 느려 이유입니다, 더 많은 처리를 의미 일부 포함한다는 사실에 기인한다 생각합니다.

음모가 특정 시간 범위에 도달 한 후에 데이터 배열의 시작 부분에서 이동을 시작하는 것이 좋습니다.

if(time limit has reached) myData.shift(); 

최상의 솔루션이 아닐 수도 있습니다. 그러나 브라우저를 손상시키지 않으면 서 마지막 10 분 (또는 배열을 트리밍하기로 결정한 시간) 동안 데이터를 볼 수 있습니다.