플롯 차트 렌더링 중 애니메이션로드 중

Question

플롯 차트를 사용하여 큰 그래프를 렌더링하는 동안 일종의 애니메이션을 구현하려고합니다. 나는 수많은 실패한 해결책을 모두 시도했다. 아무도 이것이 가능한 모든 경우에 알 수 없으므로 사용자는 그래프가 렌더링되고 있음을 볼 수 있습니다.

로드하는 gif와 함께 오버레이를 사용하려고 시도했지만 그래프가 렌더링을 중지 할 때까지 애니메이션이 움직이지 않습니다.

코드가 많이 묻지 만 사용자가 진행 상황을 볼 수 있는지 확인하고자합니다. 미리

Answer 1

FLOT에

덕분 UI 스레드에 한 번에 전체 줄거리를 렌더링한다. 라이브러리 자체를 수정하지 않고 진행 상황을 표시 할 수있는 방법은 없습니다. 완벽한 솔루션은 많은 작업을 필요로하지만 데이터에 따라 적절한 근사가 많은 노력을 필요로하지 않을 수도 있습니다.

예를 들어, 플롯에 여러 시리즈가 포함되어 있고 각각의 시리즈가 매우 빠르게 렌더링되지만 함께 사용하면 시간이 오래 걸리는 경우를 가정 해 보겠습니다. 당신이 FLOT 소스를 열고 그리기 함수를 보면이 경우, 각 시리즈 drawSeries 호출하는 간단한 루프가있는 것을 볼 수 있습니다 :

function draw() { 

    CODE BLOCK A 

    for (var i = 0; i < series.length; ++i) { 
     executeHooks(hooks.drawSeries, [ctx, series[i]]); 
     drawSeries(series[i]); 
    } 

    CODE BLOCK B 
} 

대략 (와 그 교체는, 테스트하지 않았습니다 이 다음과 같습니다 :

function draw() { 

    CODE BLOCK A 

    var i = 0, 
     drawNextSeries = function() { 
      drawSeries(series[i]); 
      if (++i < series.length) { 
       setTimeout(drawNextSeries, 0); 
      } else { 
       CODE BLOCK B 
      } 
     }; 

    setTimeout(drawNextSeries, 0); 
} 

아이디어는 setTimeout을 통해 별도의 호출로 각 계열을 그립니다. 0 밀리 초 지연은 다른 JS 코드, 애니메이션 등과 같이 보류중인 작업 이후에 호출되도록 대기열을 대기시킵니다. 따라서 각 시리즈가 그려지면 다음 UI가 그려지기 전에 UI가 업데이트 될 수 있습니다.

다시 한번 말하지만,이 시리즈는 각각 상당히 빠르게 그려지는 시리즈가 많은 경우에만 작동합니다. 하나의 커다란 시리즈 만 있다면, 비슷한 결과를 얻지 만 drawSeries 내에서 처리 할 것입니다.