问题描述
我正在使用 Chart.js.我试图通过获取 base 64 字符串将图表转换为图像.本教程 (http://www.chartjs.org/docs/) 在主题:
I am using Chart.js. I am trying to convert the chart to an image by getting a base 64 string. The tutorial (http://www.chartjs.org/docs/) devotes an entire 1 line on the topic:
canvas 元素还允许将内容保存为 base 64字符串,允许将图表保存为图像.
canvas
元素具有toDataURL
方法,该方法返回图像的base64 字符串.但是,当我这样做时,它呈现的图像只是一个具有图表尺寸的透明矩形,它不包括图表内容.
A canvas
element has the method of toDataURL
, which returns a base64 string of the image. However, when I do that, the image it renders is just a transparent rectangle with the dimensions of the chart, and it does not include the chart contents.
这是一个小提琴:http://jsfiddle.net/KSgV7/
小提琴中的图像"带有黑色边框,因此您可以看到它们应该在哪里,因为它们似乎只是一个大的透明块.
The "images" in the fiddle are styled with a black border, so you can see where they are supposed to be, since they seem to just be a big transparent block.
有没有人成功地将 Chart.js 图表转换为图像?
Has anyone successfully converted a Chart.js chart to an image?
推荐答案
图表似乎是异步的,因此您可能需要在动画完成时提供回调,否则画布将为空.
The chart seem to be async so you will probably need to provide a callback when the animation has finished or else the canvas will be empty.
var options = {
bezierCurve : false,
onAnimationComplete: done /// calls function done() {} at end
};
这篇关于使用 .toDataUrl() 将 Chart.js 画布图表转换为图像会导致空白图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!