1

我想两个显示一个图表,并提供一个带有指向更大图表的链接的 url。小预览图像看起来和工作正常:

<canvas id="image"></canvas>

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

画布被包裹在一个 div 中,这就是为什么offsetWidthoffsetHeight(填充这个额外的 div 元素)。响应式设计的原因是没有固定的图像。无论如何,这完美无缺。对于“更大”图像的 URL,我想要 URL。我知道toDataURL()会有所帮助。

var url = document.getElementById("image").toDataURL();
document.write(url);

它有两个令人不安的问题:

  1. 这种方式的网址是存在的,但是图片没有内容。
  2. 我也想给画布图像一个新的大小,就像我用ct1.canvas.widthct1.canvas.height管理一样,但似乎我无法将它添加到toDataURL

代码有什么问题?

4

1 回答 1

0

好吧,我想我明白了。Chart.js正在为图表设置动画,因此我在第一个问题中提到的 toDataURL() 只呈现了一个空图像。我们必须启动 toDataURL,而不是在动画完成之前。我们使用以下选项处理:

var options = { 
onAnimationComplete: done
}

和一个小功能:

function done() {
console.log('done');
var url=document.getElementById("canvas").toDataURL();
document.getElementById("canvas_link").href=url;
}

我想就是这样。

于 2014-04-15T12:52:56.623 回答