从异步Ajax响应加载谷歌图 [英] Load a Google Chart from an asynchronous AJAX response

问题描述

在老谷歌图表API有可能使用PHP来渲染图表，还出现了包装做到这一点： HTTP：//$c$c.google.com/p/gchartphp/

In the old Google Chart API it was possible to use PHP to render a chart, there was even a wrapper to do it: http://code.google.com/p/gchartphp/

但随着新的图表API HTTP：//$c$c.google.com/apis/chart/ 产生多少发烧友的图表，但只加载与JavaScript在浏览器中。

But with the new Chart API http://code.google.com/apis/chart/ which produces much fancier chart, but loads only with javascript in the browser.

效果我想实现的是提交选择题的形式通过AJAX服务器，有PHP更新数据库服务器端，然后返回更新后的图表。

The effect I am trying to achieve is submitting a multiple choice form to the server via AJAX, have the PHP update the DB serverside, then return the updated chart.

在旧的API的方式，我可以这样做。但在新的方式，我会回来的JavaScript的浏览器，其附加到文件，以使图表。因为这个原因，将不会执行。我相信我可以的eval（）这个JavaScript，但就是不好的形式是不是因为有人可以做一些讨厌的东西与不能，他们 - 的eval（）荷兰国际集团一个服务器端的响应

In the old API way I could have done this. But in the new way I would be returning javascript to the browser and appending it to the document in order to render the chart. It wouldn't execute because of this. I believe I could eval() this javascript but that is bad form isn't it because someone could do some nasty stuff with that couldn't they - eval()ing a serverside response?

我如何克服呢？是否有一个PHP包装器，以帮助这个？还是有另一种原因，我忽略了？

How can I overcome this? Is there a PHP wrapper to help this? Or is there another why which I have overlooked?

感谢

推荐答案

我解决这个问题的办法是pretty的明显结束。我只是需要加强我的思想之外，并从不同的角度接近它。

The way I solved this issue was pretty obvious in the end. I just needed to step outside my thoughts and approach it from a different angle.

我试图处理数据库信息和创建在服务器端的谷歌图（饼图在这种情况下），使用PHP的所有站的工作。然后返回，作为Ajax响应。

I was trying to all the leg work of processing the database information AND creating the Google Chart (a Pie Chart in this case) on the server side, using PHP. Then return that as the AJAX response.

事实上，所有我需要做的是回到创建饼图（连同一些额外的元数据，如目标元素的id）所需要的数据。我这样做是为JSON。然后，通过在谷歌图表文档采摘我能够了解如何使用客户端的JavaScript加载返回的JSON数据触发的API。然后让谷歌code渲染图客户端 - 所以我基本上转移所有的渲染责任到客户端浏览器。这是旧的和新的图表API的不同。

Actually all I needed to do was return the data needed to create the Pie Chart (along with some extra meta data such as target element id). I did this as JSON. Then by picking through the Google Charts documentation I was able to find out how to trigger the API using client side javascript to load the returned JSON data. Then let the Google code render the chart client side - so I basically shifted all the rendering responsibility to the client browser. This is where the old and new chart APIs differ.

我花了很多的试验和错误和大量的帮助下，从萤火虫的。一个大的转换点是值得一提的是，你需要加载所有的谷歌JSAPI您收到的JSON响应之前 - 这样的初始页面呈现 - 一件事你必须做的：

It took a lot of trial and error and plenty of help from Firebug. One big tripping point which is worth mentioning is that you need to load all the Google JSAPI before you receive the JSON response - so as the initial page renders - and one thing you must do with:

google.load("visualization", "1", {packages:["corechart"]});

是要确保它加载的页面渲染。如果调用此之后，页面已经完全呈现后，页面会重新加载。

is make sure it loads as the page is rendering. If you call this after the page has completely rendered then the page will reload.

希望这可以帮助别人。

这篇关于从异步Ajax响应加载谷歌图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！