charts - 画像としてのGoogleチャート

Question

Googleのグラフを使用して、グラフの画像をメールに埋め込もうとしています。したがって、各ユーザーには固有のグラフがあります。

APIを使用して、グラフをレンダリングし、電子メールクライアントに画像を配信する一意のURLを埋め込むことはできますか？

Answer 1

chart.getImageURI()次のように使用して、チャートの PNG バージョンを取得できます。

チャートが描かれた後に必要なので、readyイベントで！

var my_div = document.getElementById('my_div');
var my_chart = new google.visualization.ChartType(chart_div);

google.visualization.events.addListener(my_chart, 'ready', function () {
  my_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
});

my_chart.draw(data);

Answer 2

Google Chart Wizardを使用して、チャートの画像をレンダリングする URL を生成することができます。ただし、そのサービスは最近 (4 月だと思います) 非推奨になったためです。それでも問題なく動作しますが、長期的な解決策として、別の方法を考え出す必要があるかもしれません.

編集

もう 1 つの方法は、メールを送信する前に画像を生成してサーバーに保存することです。これを行うには、特定のスラッグを解析してグラフを生成する専用のページをサーバーに配置し、グラフが読み込まれたときに画像データを含む POST 要求を送信します。非表示のキャンバス (HTML5 が必要) とcanvg javascript プラグインを使用して、データ URI にアクセスできます。

chart_area = document.getElementById("chart_div").getElementsByTagName('iframe')[0].contentDocument.getElementById("chartArea");
svg = chart_area.innerHTML;
canvas = document.getElementById("hidden_canvas");
canvas.setAttribute('width', chart_area.offsetWidth);
canvas.setAttribute('height', chart_area.offsetHeight);

canvg(canvas, svg);
image_data_uri = canvas.toDataURL("image/png");

Answer 3

パーティーに少し遅れましたが、この正確な必要性のためにhttps://ChartURL.comを構築しました。この質問はほぼ 3.5 年前のものであるにもかかわらず、ChartURL が廃止されるまでの最良のソリューションは非推奨の Google Image Charts API だったからです :)

これが誰かを助けることを願っています!