toDataURL()을 사용하여 여러 캔버스 이미지 (Chart.js 기준)

Question

Chart.js으로 두 개 이상의 연결된 캔버스 차트를 처리하는 방법은 무엇입니까?이 스크립트를 사용하면 canvas-image가 큰 버전으로 링크되어 큰 파일을 fancybox에 표시하거나 두 번만 다운로드 (오른쪽 클릭 -> 저장) 할 수 있습니다. 쉬운. 이 애니메이션이 종료되지 전에 전체 차트를 렌더링 원인

<a HREF="#" id="canvas_link_1"> 
<canvas id="image1"></canvas> 
</a> 

<a HREF="#" id="canvas_link_2"> 
<canvas id="image2"></canvas> 
</a> 

, 그것은 조금 까다로운 Chart.js와 toDataURL()을 사용합니다. URL을 너무 일찍 요청하면 빈 (투명) 이미지가 표시됩니다. 그것은 우리가 옵션에서 onAnimationComplete이 필요한 이유입니다 :

나중에 스크립트

var options = { 
onAnimationComplete: done 
} 

, 그것은/화재 애니메이션이 끝나면, 새로운 HREF 변경됩니다.

var ct1 = document.getElementById("image1").getContext("2d"); 
ct1.canvas.width = document.getElementById("image1").offsetWidth; 
ct1.canvas.height = document.getElementById("image1").offsetHeight; 
var Chart1 = new Chart(ct1).Line(lineChartData1,options); 

function done() { 
var url1=document.getElementById("image1").toDataURL(); 
document.getElementById("canvas_link_1").href=url1; 
} 

var ct2 = document.getElementById("image2").getContext("2d"); 
ct2.canvas.width = document.getElementById("image2").offsetWidth; 
ct2.canvas.height = document.getElementById("image2").offsetHeight; 
var Chart2 = new Chart(ct2).Line(lineChartData2,options); 

function done() { 
var url2=document.getElementById("image2").toDataURL(); 
document.getElementById("canvas_link_2").href=url2; 
} 

그게 작동합니다. 그러나 하나만 캔버스 이미지. 내가 함수를 삭제 한 경우이 첫 번째 캔버스에서 작동하고, 첫 번째 함수를 삭제하면 두 번째 캔버스 만 URL을 표시합니다.

"문제가"완료되었습니다 "라고 생각합니다. 상황과 마찬가지로 이름이 아닐까요? "var 옵션"은 모든 캔버스 이미지에 대해 일반적입니다 (options1 및 options2로 변경할 수 있고 "Line (lineChartData1, options1)"에도 변경할 수 있음) ... "done"이 모두 실행됩니다 기능이이고 나쁜 것입니다 - 마지막으로 기능이 인 것 같습니다.

반대쪽에서 의 이름을 바꿀 수 없습니다 onAnimationComplete. 그것은 null이거나 완료되었습니다. 무엇을 할 것인가?

Answer 1

다른 이름으로 다른 콜백을 가질 수 있습니다. "done"은 예제 이름 일뿐입니다 (더 나은 이름은 아마도 "완료"될 것입니다).

... 
var Chart1 = new Chart(ct1).Line(lineChartData1, options1); 

... 
var Chart2 = new Chart(ct2).Line(lineChartData2, options2); 

을 마지막으로 콜백 정의 :

var options1 = { 
    onAnimationComplete: done1 
}; 

var options2 = { 
    onAnimationComplete: done2 
}; 

는 그런 사람들과 차트를 초기화 :

function done1() { 
    var url = document.getElementById("image1").toDataURL(); 
    document.getElementById("canvas_link_1").href = url; 
} 

function done2() { 
    var url = document.getElementById("image2").toDataURL(); 
    document.getElementById("canvas_link_2").href = url; 
} 

를 처음 두 옵션 객체, 각 차트를 만들 - 예를 들어

호프가 도움이 되었으면 좋겠다.