保存谷歌計圖表爲PNG

我使用谷歌的圖表，並有混合圖表，一些餡餅，一列圖表和儀表圖保存谷歌計圖表爲PNG

頁有一個選項生成PDF的頁面，所以我轉換圖表PNG在PDF使用..

所有圖表中相同的方式產生，使用一個div來顯示谷歌圖表和一個隱藏的div來存儲PNG圖像

var chart = new google.visualization.Gauge(document.getElementById('gauge')); 
    var hidden = new google.visualization.Gauge(document.getElementById('gauge_hidden')); 

    // Wait for the chart to finish drawing before calling the getImageURI() method. 
    google.visualization.events.addListener(chart, 'ready', function() { 
     gauge_hidden.innerHTML = '<img src="' + chart.getImageURI() + '">'; 

    }); 
    chart.draw(data, options);

此代碼適用於餡餅和柱狀圖，但在量表上，我看到了

chart.getImageURI不是函數

任何想法如何我可以得到PNG？

歡呼

來源

2016-08-25 Andie

我面臨同樣的問題，但一些閱讀後，我已經來到這個解決方案：

我使用jQuery，使這個更容易一些。

首先，使用XMLSerializer將SVG圖表轉換爲字符串，然後使用btoa將其轉換爲base64。您可以使用此字符串是這樣的：

var s = new XMLSerializer().serializeToString($(chart_div).find('svg')[0]); 
var base64String = "data:image/svg+xml;base64," + window.btoa(s);

在我來說，我需要的計圖表繪製到PDF和DOMPDF不支持這種格式，所以如果你需要一個「數據：圖像/ PNG; base64「字符串，您可以繼續使用此解決方案。

您需要將「svg + xml; base64」設置爲新圖像的src，然後將該圖像繪製到Canvas。之後，您可以使用canvas中的toDataURL方法獲取base64 png的內容。

var s = new XMLSerializer().serializeToString($(chart_div).find('svg')[0]); 
 
var image = new Image(); 
 
image.width = 640; 
 
image.height = 480; 
 
image.src = 'data:image/svg+xml;base64,' + window.btoa(s); 
 
var myCanvas = document.createElement('canvas'); 
 
myCanvas.width = 640; 
 
myCanvas.height = 480; 
 
var myCanvasContext = myCanvas.getContext('2d'); 
 
myCanvasContext.drawImage(image,0,0); 
 
// get google chart gague to base64, yey! 
 
var base64String = myCanvas.toDataURL();

感謝的this answer作者和這個post

來源

2017-03-31 04:28:34

保存谷歌計圖表爲PNG

回答

相關問題