Can Google Visualization: Pie Chart output to a PN

Google Visualization API can draw the pie chart in the website with javascript. Can the chart be output as a PNG image file?

Thanks.

回答1:

Sure, just use the static image Google Chart API

At least, you can until 20 Apr 2015 :(

回答2:

Yes. This is no longer natively supported in the Google Visualization API, but it only requires a few lines of JavaScript, below.

The solution, originally, described by Riccardo Govoni in the wonderful Battlehorse tutorial, converts SVG to Canvas and then to PNG, which can then be displayed or saved.

The tutorial code no longer works, but I added two fixes to it:

Set the chartArea variable to work with Google Visualization API version 1.32 (Sept 24, 2012) and later (source)
Use canvg.js r157 as a workaround for a regression identified by nverba

<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>

回答3:

I found this, but have not yet tested it: https://gist.github.com/battlehorse/1333906

Looks like it uses canvas to clientside convert the data into SVG/PNG, which will print.