如何使用Chart.js处理两个或多个链接的 Canvas-Charts ?使用此脚本,画布图像与更大的版本链接,以在花式框中显示大文件或仅下载两个(右键单击 -> 保存)。简单的。
<a HREF="#" id="canvas_link_1">
<canvas id="image1"></canvas>
</a>
<a HREF="#" id="canvas_link_2">
<canvas id="image2"></canvas>
</a>
要将toDataURL()与Chart.js一起使用,这有点棘手,因为它不会在动画结束之前渲染整个图表。如果我们过早请求 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;
}
这样可行。但只有一个画布图像。如果我删除第二个函数 done()它将与第一个画布一起使用,如果我删除第一个函数,则只有第二个画布显示 url。
我认为问题在于“完成”,它不是一个名字,就像一种情况,或者?“var options”对于所有画布图像都是通用的(当然我可以更改为 options1 和 options2 以及“Line(lineChartData1,options1)”,但没有任何更改)......所以“done”将触发所有功能而且 - 这很糟糕 - 似乎只有最后一个功能。
另一方面,我无法重命名onAnimationComplete的条目。它是空的或完成的,没有别的。该怎么办?