我正在尝试使用html2canvas捕获图表,该图表使用morris.js图表库进行渲染,但只捕获了容器。
这是图表:
这就是被捕获的内容
这是一个非工作小提琴的链接 http://jsfiddle.net/4FMUF/
这是代码:
HTML
<div id="mainDiv" style="">
<div id="myfirstchart" style="height: 250px;"></div>
</div>
JS
Morris.Bar({
element: 'myfirstchart',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
setTimeout(function(){
html2canvas($('#mainDiv'), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
}
});
},2000);
知道什么是错的吗?
答案 0 :(得分:0)
setTimeout(function(){
html2canvas($('#mainDiv')`[0]`, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
}
});
},2000);
你应该在这个函数中使用不是JQuery对象!
添加[0]
元素索引来执行此操作!但morris图表使用SVG和插件不会正确烘焙图像! (在官方网站上存在关于svg问题的说明)
我也正在寻找解决方案。如果您找到了 - 请告诉我们:)
哦...... BTW Morris Graphs Export as PDF?