1

如何使用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的条目。它是空的或完成的，没有别的。该怎么办？

4

1 回答 1

0

您可以有不同名称的不同回调。“完成”只是一个示例名称（更好的名称可能是“完成”）。

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

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

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

于 2014-04-15T15:20:01.490 回答