25

Google Chart Images APIは現在非推奨であり、2015 年 4 月 20 日に廃止される予定です。

それを置き換えて、URL にパラメータを指定するだけでチャート画像を生成できる他の無料サービスはありますか?

PNG 画像を生成するために使用される URL の例を次に示します。これは HTML 画像ソースとして使用でき、特に電子メールで役立ちます。

http://chart.apis.google.com/chart?chxl=1:|Apr+04|Apr+05|Apr+06|Apr+07|Apr+08|Apr+09&chxp=1,0,20,40 ,60,80,100&chxr=0,0,45&chxs=1,676767,11.5,0,lt,676767&chxt=y,x&chs=550x198&cht=ls&chco=3366CC,FF9900&chds=0,45,0,45&chd=t:7,12, 11,9,13,7|11,26,45,24,22,27&chdl=訪問数++++|ページ+ビュー&chdlp=t&&chdls=333333,16&chg=100,20,0,0&chls=4|2

これにより、タグを介して簡単に追加できる次の画像が生成され、<img>すべてのブラウザーと電子メール クライアントでサポートされます。

Google Charts API イメージ

4

6 に答える 6

5

現時点では、実際にチャートに「直接リンク」するための解決策は見つかりませんでした (後述)。ただし、チャートを画像/ 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 .. ..

もちろん、これからもずっと……いつものように。私はまだこれを操作/リモートリンク/送信しようとはしていません-画像としてのみ使用しました-しかし、これは非常に簡単だと確信しています!


上記のコードの結果/出力:

ここに画像の説明を入力

于 2013-09-18T17:33:52.140 に答える
5

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"
于 2016-01-06T20:45:29.217 に答える
2

また、静的な画像チャートを生成できる他の同様のサービスを探していましたが、これまでのところ成功していません.

ただし、独自のサーバーで php スクリプトを使用して独自の「サービス」を作成し、パラメーターを渡すこともできます。

たとえば、pChartなどの php チャート ライブラリを使用して、phpでグラフを生成し、スクリプトから .png 画像を返すことができます。

JavaScript ベースのグラフ作成ソリューションの問題点として、オンザフライでグラフを含む PDF を生成したい場合、またはリッチテキスト エディタ内でグラフを生成したい場合、または単に電子メールで使用したい場合 (すでに述べたように)。

于 2015-02-08T10:36:22.600 に答える
1

また、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);
于 2016-09-22T13:04:46.103 に答える