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問題的注意事項）

我正在尋找解決方案。如果您發現 - 請告訴我們:)

Ooohh ...順便說一句Morris Graphs Export as PDF?