PHP谷歌图表API [英] PHP Google Charts API

问题描述

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

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

以下是有问题的代码：

加载AJAX API

 < script type =text / javascriptsrc ='https：//www.google.com/jsapi？autoload = {modules：[{命名 ： 可视化， 版本： 1， 包：[ corechart， 表]}]}'>< /脚本> 
  

数据：

  var data = new google.visualization.DataTable（）; 
 data.addColumn（'string'，'City'）; 
 data.addColumn（'数字'，'犯罪数量'）; 
 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>条形图< / p> 
< a href =＃>< img src =http://donsmaps.com/clickphotos/dolnivi200x100.jpg>< / img>< / a> 
< p>另一个图表< / p> 
< a href =＃>< img src =http://donsmaps.com/clickphotos/dolnivi200x100.jpg>< / img>< / a> 
< p>另一个图表< / p> 
< a href =＃>< img src =http://donsmaps.com/clickphotos/dolnivi200x100.jpg>< / img>< / a> 
< / div> 
< div id =right> 
< p>散点图< / p> 
< a href =＃>< img src =http://donsmaps.com/clickphotos/dolnivi200x100.jpg>< / img>< / a> 
< p>另一个图表< / p> 
< a href =＃>< img src =http://donsmaps.com/clickphotos/dolnivi200x100.jpg>< / img>< / a> 
< p>另一个图表< / p> 
< a href =＃>< img src =http://donsmaps.com/clickphotos/dolnivi200x100.jpg>< / img>< / a> 
< / div> 
  

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

这甚至可能吗？

谢谢

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

$ b

第一个解决方案是使用Google的图片图表api 基本上重新创建您的SVG图表。您可以通过图像的 src URL传递动态数据。这种方法的主要缺点是（a）你必须通过图表api重新创建每个图表;和（b） Google图表API是正式弃用 。但是，Google已承诺至少在2015年4月之前维护该服务，因此，如果您期望该网站的发展到目前为止是一种有效的方法。还有一件事要提到的是，你可能想创建相对较大的缩略图，然后缩小它们，以便比例（例如文本大小）与最终SVG版本的相对比例匹配。

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

就我个人而言，我对Google没有创建简单的缩略图创建方式感到失望，因为它似乎是一件相当常见的任务，但据我所知，这样的解决方法是必要的。

I'm writing a program that take a generated data set via Google API and displays it in PHP. This is perfectly fine and has been achieved, however I wish to add thumbnails to the code which displays different charts of the same dataset (in thumbnail form).

I am using the Google API to generate the data and display it, but I'm not sure how I would get it to change the visualisation type (currently using Pie as the main chart) so the user is able to view the different visualisations for that dataset.

Here is the code in question:

Load the AJAX API

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

The data:

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]
             ]);

Draw the Graph:

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

Here are the thumbnails:

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

So basically, how would I get google.visualization.BarChart (and others) into the img src for the thumbnails?

IS this even possible?

Thanks

解决方案

I've had to solve a similar problem, and there are two solutions (that I'm aware of), neither of which is perfect.

The first solution is to use Google's image chart api to essentially re-create your SVG charts. You can pass in your dynamic data via the src URL of an image. The major drawbacks of this approach are (a) You have to re-create each chart via the image-chart api; and (b) Google Image Chart API is officially deprecated. However, Google has committed to maintaining the service at least through April 2015, so if you expect the site to evolve by then it's a valid approach. One other thing to mention is that you'll likely want to create relatively large thumbnails and then scale them down, so that the proportions (text size, for instance) match the relative proportions of the final SVG version.

The second solution (which I'm currently using) is to employ a screen-capture service like URL2PNG. Most screen capture APIs won't work because they either ignore JS or take the screenshot before the JS has been applied, but url2png and a few other services are able to do this. Just create a simple caching system to store screenshots of each chart (you may want to have each chart be accessible via a URL that displays the chart on an otherwise blank template so that you don't have to worry about screen position or cropping issues), and have this cache get cleared and rebuilt any time the data is altered (you'll need a cache, though, as screen-capture services are inherently pretty slow). The major drawback of this approach is that you'll have to pay for the service (I'm not aware of any free screen-capture service that can accurately capture google charts).

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.

这篇关于PHP谷歌图表API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！