2017-09-26 8 views
2

私はGoogleのグラフを描いています。今、私はpdf形式でグラフを保存するボタンを入れたいです。私はここからSave google charts as pdfと他の質問をスタックで見ることができますが、動作しません。PDF形式でGoogleのグラフをエクスポートするには?

既に使用されているGoogleマップによるpng画像を印刷しますが、png画像で新しいタブを開くだけですが、PDF形式で保存ダイアログは表示されません。

誰もそれを行う方法を知っていますか?

答えて

3

あなたは... PDF

作業スニペット以下を参照してくださいにグラフの画像のURIを追加するPDF

利用方法addImageを作成するために

google.charts.load('current', { 
 
    packages: ['controls', 'corechart', 'table'] 
 
}).then(function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'X'); 
 
    data.addColumn('number', 'y0'); 
 
    data.addRows([ 
 
    [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], 
 
    [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35], 
 
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48], 
 
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57], 
 
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53], 
 
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65], 
 
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65], 
 
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70], 
 
    [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70], 
 
    [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68], 
 
    [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69], 
 
    [66, 70], [67, 72], [68, 75], [69, 80] 
 
    ]); 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.LineChart(container); 
 
    var btnSave = document.getElementById('save-pdf'); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    btnSave.disabled = false; 
 
    }); 
 

 
    btnSave.addEventListener('click', function() { 
 
    var doc = new jsPDF(); 
 
    doc.addImage(chart.getImageURI(), 0, 0); 
 
    doc.save('chart.pdf'); 
 
    }, false); 
 

 
    chart.draw(data, { 
 
    chartArea: { 
 
     bottom: 24, 
 
     left: 36, 
 
     right: 12, 
 
     top: 48, 
 
     width: '100%', 
 
     height: '100%' 
 
    }, 
 
    height: 600, 
 
    title: 'chart title', 
 
    width: 600 
 
    }); 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script> 
 
<input id="save-pdf" type="button" value="Save as PDF" disabled /> 
 
<div id="chart_div"></div>

jsPDFを使用することができます
+0

ありがとうございます。しかし、このコードでは '0,0'を知っていますか?doc.addImage(chart.getImageURI()、0、0); "何を意味するの? – joun

+0

それは自動的にpdfに変換されますか?私はpdfにエクスポートするボタンを作成したい。 – joun

+0

上記の回答が変更されました、ボタンが追加されました... – WhiteHat

関連する問題