html2canvas捕获morris.js图表

Question

我正在尝试使用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);

知道什么是错的吗？

Answer 1

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

你应该在这个函数中使用不是JQuery对象！ 添加[0]元素索引来执行此操作！但morris图表使用SVG和插件不会正确烘焙图像！ （在官方网站上存在关于svg问题的说明）

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

哦...... BTW Morris Graphs Export as PDF?