1

我正在编写一个程序，该程序通过 Google API 获取生成的数据集并在 PHP 中显示它。这非常好并且已经实现，但是我希望将缩略图添加到显示同一数据集的不同图表的代码中（以缩略图形式）。

我正在使用 Google API 生成数据并显示它，但我不确定如何让它更改可视化类型（当前使用 Pie 作为主图表），以便用户能够查看不同的可视化该数据集。

这是有问题的代码：

加载 AJAX API

 <script type="text/javascript" src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","table"]}]}'></script>

数据：

var data = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('number', 'Number of Crimes');
data.addRows([
             ['Cardiff', 300],
             ['London', 900],
             ['Manchester', 500],
             ['Dublin', 400],
             ['Liverpool', 600]
             ]);

绘制图形：

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);

以下是缩略图：

<div id="left">
  <p>Bar chart</p>
  <a href="#"><img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg"></img></a>
  <p>Another chart</p>
  <a href="#"><img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg"></img></a>
  <p>Another chart</p>
  <a href="#"><img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg"></img></a>
</div>
<div id="right">
  <p>Scatter Chart</p>
  <a href="#"><img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg"></img></a>
  <p>Another chart</p>
  <a href="#"><img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg"></img></a>
  <p>Another chart</p>
  <a href="#"><img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg"></img></a>
</div>

所以基本上，我如何将 google.visualization.BarChart （和其他）放入缩略图的 img src 中？

这甚至可能吗？

谢谢

4

1 回答 1

2

我不得不解决一个类似的问题，并且有两种解决方案（我知道），但都不是完美的。

第一个解决方案是使用 Google 的图像图表 api从本质上重新创建您的 SVG 图表。您可以通过src图像的 URL 传递动态数据。这种方法的主要缺点是 (a) 您必须通过 image-chart api 重新创建每个图表；(b) Google Image Chart API 已正式弃用。但是，Google 已承诺至少在 2015 年 4 月之前维护该服务，因此如果您希望该网站到那时会发展，这是一种有效的方法。另一件要提到的事情是，您可能希望创建相对较大的缩略图，然后按比例缩小它们，以便比例（例如文本大小）与最终 SVG 版本的相对比例相匹配。

第二种解决方案（我目前正在使用）是使用URL2PNG 之类的屏幕捕获服务. 大多数屏幕截图 API 无法工作，因为它们要么忽略 JS，要么在应用 JS 之前截取屏幕截图，但 url2png 和其他一些服务能够做到这一点。只需创建一个简单的缓存系统来存储每个图表的屏幕截图（您可能希望通过在其他空白模板上显示图表的 URL 访问每个图表，这样您就不必担心屏幕位置或裁剪问题） ，并在数据更改时清除并重建此缓存（不过，您需要一个缓存，因为屏幕捕获服务本身就很慢）。这种方法的主要缺点是您必须为服务付费（我不知道任何可以准确捕获谷歌图表的免费屏幕捕获服务）。

Personally, I'm disappointed that Google hasn't created an easy way to create thumbnails, as it seems like a pretty common task, but to my knowledge some kind of workaround like this is necessary.

于 2013-02-13T01:21:01.620 回答