web-dev-qa-db-ja.com

グーグルチャートを画像として保存することは可能ですか？

グーグルチャートを画像として保存する必要のあるアプリケーションを作っています。私が使用しているのは、Tomcat、サーブレット、JavaScriptだけです。次の生成されたチャートを画像として保存する方法はありますか？ （投稿の最後にあるコードを参照してください）。アイデアは、ユーザーがこのチャートを見て、それを自分のFacebookプロフィールにアップロードするオプションを持つというものです。これがネイティブ形式でFacebookにアップロードできるのか、それともjpgとして保存する必要があるのか​​わかりません。

<html>    
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addRows(4);
    data.setValue(0, 0, ''+2004);
    data.setValue(0, 1, 1000);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1170);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 860);
    data.setValue(3, 0, '2007');
    data.setValue(3, 1, 1030.5);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, title: 'Company Performance',hAxis: {title: "X", titleTextStyle: {color: "green"}}});
  }

</script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>
javascriptimagesavecharts
13
Kashif

この機能は最近だったようです1 として追加：

chart.getImageURI()

ドキュメント を参照してください。

12014年1月29日リリースで追加されたようです。

12
mgilson

グーグルチャートの問題ページに見られるRiccardoGovoniのソリューション例。アイデアは、SVGをCanvas要素に変換することです。

リンク：

チュートリアル： http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html

ページの例： http://www.battlehorse.net/attach/topics/charts/google_charts_to_image.html

7
Kosio

これが私がすることです

http://danml.com/#/download.html

 download(chart.getImageURI(), 'fileName.png', "image/png");

3kbスクリプトが多すぎる場合 http://www.closure-compiler.appspot.com/home

4
Oshan Wisumperuma

最も簡単なオプションは、 Google Chart API を使用してグラフの静止画像バージョンを再生成することです。

1
RSG

GrChartImgライブラリを使用します。これは、GeorgeRisvasのクロスブラウザソリューションです。 IEの古いバージョンを含むすべてのブラウザをサポートし、チャートを画像に変換する、ダウンロードする、チャートをダイアログに表示する、サーバーにアップロードするなどの多くの自動手順を提供します。

詳細については、 www.chartstoimage を参照してください。

お役に立てば幸いです。

1
john

まず、このライブラリをダウンロードします。

http://danml.com/download.html

チャート内にイベントリスナーを追加するだけで済みます

function: 
 google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {

var chart = new google.visualization.ComboChart(document.getElementById('chart_tickets'));
    google.visualization.events.addListener(chart, 'ready', function () {

    $("#GraphDownloadTickets").click(function() {
         download(chart.getImageURI(), 'fileName.png', "image/png")

    });
}
0
Fahem Idir