Google Chart Images APIは現在非推奨であり、2015 年 4 月 20 日に廃止される予定です。
それを置き換えて、URL にパラメータを指定するだけでチャート画像を生成できる他の無料サービスはありますか?
PNG 画像を生成するために使用される URL の例を次に示します。これは HTML 画像ソースとして使用でき、特に電子メールで役立ちます。
これにより、タグを介して簡単に追加できる次の画像が生成され、<img>すべてのブラウザーと電子メール クライアントでサポートされます。
現時点では、実際にチャートに「直接リンク」するための解決策は見つかりませんでした (後述)。ただし、チャートを画像/ PNGに変換することは可能であり、それが前提条件です. また、オンザフライで変換することにより、ユーザーはグラフを画像としてファイルに保存できます。
<svg>最新の Google チャートはタグで構築されています。このタグの内容は<canvas>、優れたcanvgライブラリを使用して描画できます。
それが完了したら、キャンバスのコンテンツを<img>byに転送できますcanvas.toDataURL。例を次に示します。
まず、canvg ライブラリをインクルードします
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
いくつかのマークアップ - 3 つのタグ、<div>グラフ用の a、a<canvas>および a<img>
<div id="chart_div" style="width: 400px; height: 300px"></div>
<canvas id="canvas"></canvas>
<img id="img" width="200">
これが実際に機能していることを示すために、画像に注意"width=200"してください:)
チャートを「通常」（誰もが慣れているように）として描画します。ここでは、テストのためだけに最小限に抑えています
function drawLineGraph() {
var data = new google.visualization.DataTable(someJSON);
chart = new google.visualization.BarChart(document.getElementById("chart_div"));
var options = {};
chart.draw(data, options);
}
にグラフを描きwindow.loadます。私はsetTimeoutfor エフェクトを使用していますが、実際のシナリオではgoogle.visualization.events.addListener(xxx, 'ready', function.
window.onload = function() {
drawLineGraph();
setTimeout(function() {
//get SVG content
var chart = document.getElementById('chart_div').getElementsByTagName('svg')[0].parentNode;
var svg = chart.innerHTML;
//get the canvas, adjust width / height
var canvas = document.getElementById('canvas');
canvas.setAttribute('width', chart.offsetWidth);
canvas.setAttribute('height', chart.offsetHeight);
//transfer SVG to canvas by canvg
canvg(canvas, svg);
//get an image source by canvas.toDataURL and add to the image
var imgsrc = canvas.toDataURL("image/png");
document.getElementById('img').setAttribute('src', imgsrc);
}, 1000);
}
画像の src は次のようになります。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt+XCAAAdCklEQVR4Xu2dfcyWZfnHDyFwtZVz68WcJWO9UCRuD4T9KjdrJC0HI8wWbmiTGMJPiXBg8bL+IIhioxio4aaiZIPZCxi9qCtro/ZsCatZGzSiLdZcNtwSwugX8Ou8Nhji88B5f0+vPdf5fD .. ..
もちろん、これからもずっと……いつものように。私はまだこれを操作/リモートリンク/送信しようとはしていません-画像としてのみ使用しました-しかし、これは非常に簡単だと確信しています!
Ramen の私のチームは最近、まさにこれを構築しました。これはChartURLと呼ばれます。Google Charts API のように永久に無料というわけではありませんが、かなり寛大な無料枠があります。
2 つの方法で URL を作成できます。まず、データを URL に暗号化できます。会計目的で暗号化を使用します (永久に無料ではないため)。どちらの場合も、template_slugとデータを URL にエンコードします。はtemplate_slug、ChartURL.com のアカウント内で変更、プレビュー、および保存できるチャート構成の文字列表現です。したがってemail-bar-chart-1、 とemail-bar-chart-2およびtimeseries-signupsそれぞれに独自のスタイル/構成を設定し、そのテンプレート内でグラフ化するデータを送信するだけです。
Ruby で URL を生成する例を次に示します。
# This is a working example. View fully commented version here:
# https://gist.github.com/ryana/055414a4804806263b82
require 'json'
require 'openssl'
require 'base64'
require 'cgi'
ENCRYPT_KEY = "dek-d7a46236eda961a6c3c18ffcc6b077ba87d27e9ae85f7842c6d427c265dd5f69d5131308d93332353d4a55a4b1160fcf516515a4a9f0aa50fbf2d7a2e7d0f1c5"
ENCRYPT_KEY_DIGEST = KEY_DIGEST = OpenSSL::Digest::SHA256.new(ENCRYPT_KEY).digest
PROJECT_TOKEN = "dt-RwYN"
def charturl_url(template_slug, data)
json = {options: data}.to_json
cipher = OpenSSL::Cipher.new 'AES-256-CBC'
cipher.encrypt
iv = cipher.random_iv
cipher.key = ENCRYPT_KEY_DIGEST
encrypted_json = cipher.update(json) + cipher.final
iv_for_url = CGI.escape(Base64.encode64(iv))
data_for_url = CGI.escape(Base64.encode64(encrypted_json))
"https://charturl.com/i/#{PROJECT_TOKEN}/#{template_slug}/#{iv_for_url}/#{data_for_url}"
end
# Call our helper
url = charturl_url("weekly-activity",
data: {columns: [["This Week", 10,12,41,9,14,15,15], ["Last Week", 9,14,21,21,20,3,5]]})
#=> https://charturl.com/i/dt-RwYN/weekly-activity/nEPfObOZ3zTivXZqri8ZLA%3D%3D%0A/7X6WrBHEdRcnutV0fU0sN8s9mHFGkkRr%2FZYJwb43p8PDzAJvGWd37zi6ro70%0AVJd9f%2FkSIq2dmJzGe%2BW6CSlpUIrhXHXogvXd%2B%2Fk4VOS%2BTSlnMBwKOSJJNpGZ%0AVrLZd%2Fgq1mSbiXQnc%2FydiTVcGL2DaA%3D%3D%0A
URL には文字数制限があるため、データを POST できる API も提供しており、短い URL が返されます。
# This is a working example. View fully commented version here:
# https://gist.github.com/ryana/d37fccd7af3c6c409164/
require 'json'
require 'typhoeus'
API_KEY = "dak-55045dac-bb35-40ac-80c8-874ab71c6f83"
def charturl_url(template_slug, options)
url = "https://charturl.com/short-urls.json?api_key=#{API_KEY}"
headers = {'Content-Type' => 'application/json'}
body = {template: template_slug, options: options}.to_json
surl_response = Typhoeus::Request.post(url, body: body, headers: headers)
raise("Error creating ShortURL: #{surl_response.inspect}") if !surl_response.success?
JSON.parse(surl_response.body)['short_url']
end
# Call our helper
url = charturl_url("weekly-activity", data: {columns: [["This week", 4,1,5,6,1,7,8], ["Last week", 1,5,3,1,6,2,6]]})
url #=> "https://charturl.com/r/J9lA"
また、静的な画像チャートを生成できる他の同様のサービスを探していましたが、これまでのところ成功していません.
ただし、独自のサーバーで php スクリプトを使用して独自の「サービス」を作成し、パラメーターを渡すこともできます。
たとえば、pChartなどの php チャート ライブラリを使用して、phpでグラフを生成し、スクリプトから .png 画像を返すことができます。
JavaScript ベースのグラフ作成ソリューションの問題点として、オンザフライでグラフを含む PDF を生成したい場合、またはリッチテキスト エディタ内でグラフを生成したい場合、または単に電子メールで使用したい場合 (すでに述べたように）。
また、PHP を使用してサーバー側で静止画像ベースのグラフが必要になるという問題にも遭遇しました。PhantomJS と Google Chart の JavaScript API を使用してこれを実現する方法を見つけました。以下は、これを行う方法の例です...
var webPage = require('webpage');
var page = webPage.create();
page.includeJs("https://www.gstatic.com/charts/loader.js", function() {
var expectedContent = '<html>' +
'<head>' +
'<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript">' +
'google.charts.load("current", {packages:["corechart"]});'+
'google.charts.setOnLoadCallback(drawChart);'+
'function drawChart() {'+
'var data = google.visualization.arrayToDataTable(['+
'[\'Task\', \'Hours per Day\'],'+
'[\'Work\', 11],'+
'[\'Eat\', 2],'+
'[\'Commute\', 2],'+
'[\'Watch TV\', 2],'+
'[\'Sleep\', 7]'+
']);'+
'var options = {'+
'title: \'My Daily Activities\','+
'is3D: true,'+
'};'+
'var chart = new google.visualization.PieChart(document.getElementById(\'piechart_3d\'));'+
'chart.draw(data, options);'+
'}'+
'</script>'+
'</head>'+
'<body>'+
'<div id="piechart_3d" style="width: 900px; height: 500px;"></div>'+
'</body>'+
'</html>';
var expectedLocation = 'http://www.phantomjs.org/';
page.setContent(expectedContent, expectedLocation);
window.setTimeout(function () {
page.render("mypng.png");
phantom.exit();
}, 1000); // Change timeout as required to allow sufficient time
});
その後、PHP 内でこの JavaScript ファイルを実行する必要があります。
exec(ROOT_DIRECTORY . "\phantomjs.exe processImageData.js ", $output);