Question

如何使用Chart.js处理两个或多个链接的Canvas-Charts？使用此脚本，canvas-image与更大的版本链接，以便在fancybox中显示大文件或者只是两个下载它（右键单击 - ＆gt;保存）。容易。

<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;
}

有效。但只能使用一个画布图像。如果我删除第二个功能完成（）它将与第一个画布一起使用，如果我删除第一个功能，则只有第二个画布显示该URL。

我认为问题出在＆＃34;完成＆＃34;，它不是一个名字，就像一个情况，或者？＆＃34; var选项＆＃34;对于所有画布图像都是通用的（我肯定可以更改为options1和options2以及＆＃34; Line（lineChartData1，options1）＆＃34;但是没有任何更改）...所以＆＃34;完成＆＃ 34;将触发所有功能并且 - 这很糟糕 - 显然只是最后的功能。

另一方面，我无法重命名 onAnimationComplete 的条目。它没有或完成，没有别的。该怎么办？

Answer 1

您可以使用不同的名称进行不同的回调。＆＃34;完成＆＃34;只是一个示例名称（更好的名称可能是＆＃34;已完成＆＃34;）。

例如 - 首先创建两个选项对象，每个图表对应一个：

var options1 = { 
    onAnimationComplete: done1
};

var options2 = { 
    onAnimationComplete: done2
};

然后使用以下内容初始化图表：

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

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

最后定义回调：

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;
}

希望这有帮助（并且我理解正确的问题）！

使用toDataURL（）的多个画布图像（通过Chart.js）

1 个答案: