谷歌可視化：餅圖輸出到PNG圖像？

Google Visualization API可以使用javascript在網站上繪製餅圖。圖表可以輸出爲PNG圖像文件嗎？谷歌可視化：餅圖輸出到PNG圖像？

謝謝。

2011-07-12 Tatming

我有同樣的問題，只有舊樣式圖表是**不適合我的需要。 – msanford

本教程演示如何將Google圖表生成的圖表轉換爲圖片，我希望這有助於：http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html – 2012-07-25 17:08:05

當然，只使用靜態圖像Google Chart API

至少，你可以到20 Apr 2015 :(

來源

2011-07-12 06:56:36

謝謝。我發現了適合我的情況的圖像餅圖。 – Tatming

新的JSAPI非常有吸引力，但HTML代碼位於標籤中。有什麼方法可以將這個很酷的輸出（https://google-developers.appspot.com/chart/interactive/docs/quick_start）轉換爲圖像嗎？ –

很抱歉，舊圖像API現已棄用 - ttl = 2015：https://developers.google.com/chart/terms – zeroasterisk

我發現這一點，但還沒有測試過它： https://gist.github.com/battlehorse/1333906

看起來它使用用戶可以將數據轉換爲SVG/PNG格式，然後打印。

來源

2013-03-13 15:29:52 zeroasterisk

自從他們在半年前刪除iframe的更新後，這不起作用。請參閱此處的解答。 http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html – Doomsknight

是的，Google Visualization API不再支持它，但它僅適用於下面需要幾行JavaScript。

該解決方案最初由Riccardo Govoni在精彩Battlehorse tutorial中描述，將SVG轉換爲Canvas，然後轉換爲PNG，然後可以顯示或保存。

教程代碼不再起作用，但我添加了兩個修復它：

設置chartArea變量與谷歌可視化API版本1.32（2012年9月24日），後來（source）
使用由nverba

canvg.js R157作爲標識的regression一種解決方法。

<html> 
<head> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="https://canvg.googlecode.com/svn-history/r157/trunk/canvg.js"></script> 
<script> 
    function getImgData(chartContainer) { 
    var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode; 
    var svg = chartArea.innerHTML; 
    var doc = chartContainer.ownerDocument; 
    var canvas = doc.createElement('canvas'); 
    canvas.setAttribute('width', chartArea.offsetWidth); 
    canvas.setAttribute('height', chartArea.offsetHeight); 

    canvas.setAttribute(
     'style', 
     'position: absolute; ' + 
     'top: ' + (-chartArea.offsetHeight * 2) + 'px;' + 
     'left: ' + (-chartArea.offsetWidth * 2) + 'px;'); 
    doc.body.appendChild(canvas); 
    canvg(canvas, svg); 
    var imgData = canvas.toDataURL("image/png"); 
    canvas.parentNode.removeChild(canvas); 
    return imgData; 
    } 

    function saveAsImg(chartContainer) { 
    var imgData = getImgData(chartContainer); 

    // Replacing the mime-type will force the browser to trigger a download 
    // rather than displaying the image in the browser window. 
    window.location = imgData.replace("image/png", "image/octet-stream"); 
    } 

    function toImg(chartContainer, imgContainer) { 
    var doc = chartContainer.ownerDocument; 
    var img = doc.createElement('img'); 
    img.src = getImgData(chartContainer); 

    while (imgContainer.firstChild) { 
     imgContainer.removeChild(imgContainer.firstChild); 
    } 
    imgContainer.appendChild(img); 
    } 
</script> 

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    // Pie chart 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Task'); 
    data.addColumn('number', 'Hours per Day'); 
    data.addRows(5); 
    data.setValue(0, 0, 'Work'); 
    data.setValue(0, 1, 11); 
    data.setValue(1, 0, 'Eat'); 
    data.setValue(1, 1, 2); 
    data.setValue(2, 0, 'Commute'); 
    data.setValue(2, 1, 2); 
    data.setValue(3, 0, 'Watch TV'); 
    data.setValue(3, 1, 2); 
    data.setValue(4, 0, 'Sleep'); 
    data.setValue(4, 1, 7); 

    var chart = new google.visualization.PieChart(document.getElementById('google_visualization_div')); 
    chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'}); 
    } 
</script> 
</head> 
<body> 
<div id="google_visualization_div"></div> 

<button onclick="saveAsImg(document.getElementById('google_visualization_div'));">Save as PNG Image</button> 
<button onclick="toImg(document.getElementById('google_visualization_div'), document.getElementById('img_div'));">Convert to image</button> 
<hr> 
<div id="img_div"> 
    Image will be placed here 
</div> 
</body> 
</html>

來源

2013-04-22 01:10:27

@ philipp ..偉大的工作.. –

在IE8即時通訊中遇到麻煩chartContainer.getElementsByTagName（'svg'）[0] .parentNode;我該如何解決它 – Hariprasath

谷歌可視化：餅圖輸出到PNG圖像？

回答

相關問題