谷歌图表图像替换

Question

在谷歌图表API图片目前已弃用,并计划在退休上二○一五年四月二十○日.

是否还有其他免费服务可以替换它并允许仅通过在URL中提供参数来生成图表图像？

以下是用于生成PNG图像的URL的示例,它可以用作HTML img源,尤其在电子邮件中非常有用:

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及反馈网站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>标签轻松添加,并支持所有浏览器和电子邮件客户端.

Answer 1

在此宣布之后,我们对Google Image Charts进行了替换, 并在其上添加了gif动画(电子邮件中的图表动画非常棒!!).

它被称为图像图表.没有更多的服务器端图表渲染痛苦,没有扩展问题,它的速度非常快,1 URL = 1图像图表.

Answer 2

http://www.jfree.org/eastwood/是谷歌图表api的开源实现.它不是100%忠实但对我来说足够接近.

Answer 3

目前我还没有找到真正“直接链接”到图表的解决方案（见下文）。但是可以将图表转换为图像/PNG，这是先决条件。通过即时转换，您可以让用户将图表作为图像保存到文件中。

现代谷歌图表建立在一个<svg>标签中。这个标签的内容可以<canvas>使用优秀的canvg库在a上绘制。

完成后，您可以将画布的内容传输到<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 个标签，a<div>用于图表，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 看起来像：

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt + XCAAAdCklEQVR4Xu2dfcyWZfnHDyFwtZVz68WcJWO9UCRuD4T9KjdrJC0HI8wWbmiTGMJPiXBg8bL + IIhioxio4aaiZIPZCxi9qCtro / ZsCatZGzSiLdZcNtwSwugX8Ou8Nhji88B5f0 + vPdf5fD .. ..

当然会一直持续下去....像往常一样。我还没有尝试操作/远程链接/发送这个 - 仅将其用作图像 -但我确信这很容易！

上面代码的结果/输出：

Answer 4

我在拉面的团队最近建造了这个.它叫做ChartURL.它不像Google Charts API那样永远免费,但有一个非常慷慨的免费套餐.

它允许您以两种方式构建URL.首先,您可以将数据加密到URL中.我们将加密用于会计目的(因为它不是永久免费的).在这两种情况下,您都将a 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

由于网址有字符限制,我们还提供了一个API,允许您向我们发送数据,我们将返回一个简短的网址:

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