gpt4 book ai didi

javascript - html2canvas 捕获 morris.js 图表

转载 作者:行者123 更新时间:2023-11-28 08:29:08 25 4
gpt4 key购买 nike

我正在尝试使用 html2canvas 捕获图表,该图表使用 morris.js 图表库呈现,并且它被捕获,但仅捕获容器。

这是图表:

enter image description here

这就是捕获的内容 enter image description here

这是一个无法使用的 fiddle 的链接 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);

知道哪里出了问题吗?

最佳答案

setTimeout(function(){
html2canvas($('#mainDiv')`[0]`, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
}
});
},2000);

您不应该在此函数中使用 JQuery 对象!添加 [0] 元素索引来执行此操作!但莫里斯图使用 SVG 和插件将无法正确烘焙图像! (官方网站上存在有关 svg 问题的注释)

我也在寻找解决方案。如果您找到了 - 请告诉我们:)

噢...顺便说一句Morris Graphs Export as PDF?

关于javascript - html2canvas 捕获 morris.js 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22066718/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com