25

Google Chart Images API目前已弃用，并计划于2015 年 4 月 20 日停用。

是否有任何其他免费服务可以替换它并允许仅通过在 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&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>标签轻松添加该图像，并且所有浏览器和电子邮件客户端都支持该图像。

谷歌图表 API 图片

4

6 回答 6

18

在此公告之后，我们对 Google Image Charts 进行了替换， 并在其上添加了gif 动画（电子邮件中的图表动画很棒！！）。

它被称为图像图表。不再有服务器端图表渲染的痛苦，没有缩放问题，它的速度非常快，1 个 URL = 1 个图像图表。

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

...和二维码：

https://image-charts.com/chart?
&chs=150x150
&cht=qr
&chl=Hello world
&choe=UTF-8

在此处输入图像描述

于 2016-10-11T21:42:21.400 回答
6

http://www.jfree.org/eastwood/是 google chart api 的开源实现。它不是 100% 忠实的，但对我来说已经足够接近了。

于 2014-01-13T17:35:34.813 回答
5

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

现代的谷歌图表是建立在一个<svg>标签中的。这个标签的内容可以<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>用于图表，一个<canvas>和一个<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

我在拉面的团队最近正是建立了这个。它被称为ChartURL。它不像 Google Charts API 那样永远​​免费，但有一个非常慷慨的免费层。

它允许您以两种方式构建 URL。首先，您可以将数据加密到 URL 中。我们将加密用于会计目的（因为它不是永远免费的）。在这两种情况下，您都将 a 和您的数据编码template_slug到 URL 中。这template_slug是图表配置的字符串表示形式，您可以在 ChartURL.com 上修改、预览和保存在您的帐户中。因此，您可以拥有email-bar-chart-1和每个都有自己的样式/配置，然后只需发送您想要在该模板中绘制的数据。email-bar-chart-2timeseries-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 有字符限制，我们还提供了一个 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 脚本创建您自己的“服务”，您可以向其传递参数。

您可以使用 php 图表库，例如pChart之类的东西来使用 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 回答