Question

我正在使用谷歌图表，并有一个混合图表页面，一些饼图，一个柱形图和一个仪表图表

该页面有一个生成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的想法？

干杯

Answer 1

我正面临着同样的问题，但经过一番阅读后，我得出了这个解决方案：

我正在使用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不支持此格式，因此如果您需要“data：image / png; base64”字符串，则可以继续使用此解决方案。 / p>

您需要将“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

的作者

将谷歌计量表保存为png

1 个答案: