Cloudformatterを使用してGoogle ChartをPDFにエクスポートし、空のPDFを生成します

Question

GoogleのグラフをPDFファイルにエクスポートしようとしています。私はxepOnline.jqPlugin.jsのプラグインを使用しています。cloudformatter.comからです。私はすべての手順を踏んだ。http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage

しかし、私がエクスポートしようとすると、PDFは空白の四角いボックスで生成されます。

私はjqueryのAJAX呼び出しからGoogleのチャートをロードしています。どのような身体が何が問題なのか教えてくれますか？

<button type="button" id="" class="btn btn-success pull-right" style="margin-right: 7px;" onclick="return xepOnline.Formatter.Format('chart_container', {render: 'download', filename: 'Years_Build', mimeType: 'application/pdf'});">Export</button> 
    <div id="chart_container"> 
     <div id="chart_div"></div> 
    </div> 
<script type="text/javascript"> 
function drawChart() { 
var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Sales', 'Expenses', 'Profit'], 
      ['2014', 1000, 400, 200], 
      ['2015', 1170, 460, 250], 
      ['2016', 660, 1120, 300], 
      ['2017', 1030, 540, 350] 
     ]); 

     var options = { 
      chart: { 
      title: 'Company Performance', 
      subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
      } 
     }; 

     var chart = new google.charts.Bar(document.getElementById('chart_div')); 
     chart.draw(data, google.charts.Bar.convertOptions(options)); 
                  } 
google.charts.load('current', {'packages': ['bar']}); 
google.charts.setOnLoadCallback(drawChart); 
</script> 

Answer 1

あなたが追加する必要があるSVG名前空間が不足している - ここで

は、AJAX呼び出しなしのサンプルコードです。それぞれのグラフのサイトでサンプルのフィドルを調べると、グラフが描画された後に名前空間を追加する関数が表示されます。例えば

、あなたがこの機能を見ることがhttp://jsfiddle.net/w1rpjxoe/

を参照してください。

function AddNamespace(){ 
    var svg = jQuery('#chart_div svg'); 
    svg.attr("xmlns", "http://www.w3.org/2000/svg"); 
    svg.css('overflow','visible'); 
} 

このリスナーから呼び出されます。

google.visualization.events.addListener(chart, 'ready', AddNamespace); 

何これが行うことに不足しているSVGの名前空間を追加することですGoogleのチャートではできないが、@cloudformatterには必要なチャートSVGが必要です。