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 回答