从异步AJAX响应加载Google Chart
在旧的Google chart API中，可以使用PHP来呈现图表，甚至有一个包装器可以做到这一点：http://code.google.com/p/gchartphp/
但是使用了新的chart API http://code.google.com/apis/chart/，它可以生成更华丽的图表，但只在浏览器中加载javascript。
我试图实现的效果是通过AJAX向服务器提交一个多项选择表单，让PHP更新数据库服务器端，然后返回更新后的图表。
在旧的API方式中，我可以做到这一点。但在新的方法中，我会将javascript返回给浏览器，并将其附加到文档中，以便呈现图表。正因为如此，它不会执行。我相信我可以eval()这个javascript，但这不是很好的形式，不是吗?因为有人可以用它做一些讨厌的事情，不是吗--eval()服务器响应？
我该如何克服这个问题呢？有没有一个PHP包装器来帮助你呢？或者还有另一个我忽略了的原因？
非常感谢
回答 3
Stack Overflow用户
发布于 2011-12-13 18:12:23
最终，我解决这个问题的方式是相当明显的。我只是需要跳出我的想法，从一个不同的角度来处理它。
我尝试使用PHP在服务器端处理数据库信息和创建Google Chart (在本例中为Pie Chart )。然后将其作为AJAX响应返回。
实际上，我所需要做的就是返回创建Pie Chart所需的数据(以及一些额外的元数据，比如目标元素id)。我是以JSON的身份这样做的。然后，通过浏览Google Charts文档，我了解了如何使用客户端javascript触发API来加载返回的JSON数据。然后让Google代码呈现图表客户端-所以我基本上将所有的呈现责任都转移到了客户端浏览器。这就是新旧图表API的不同之处。
它需要大量的试验和错误，以及Firebug的大量帮助。值得一提的是，在接收到JSON响应之前，您需要加载所有Google JSAPI，因此在初始页面呈现时，您必须做一件事：
google.load("visualization", "1", {packages:["corechart"]});就是确保它在页面呈现时加载。如果您在页面完全呈现后调用此方法，则页面将重新加载。
希望这对某些人有帮助。
Stack Overflow用户
发布于 2012-11-07 22:00:02
多亏了andyg1和Ascendant，我才能让它像这样工作(使用PrototypeJS而不是jQuery，但想法是一样的)。由于这一点并不明显，我将展示所有的步骤。
Ajax端点只返回json，如下所示(一个.NET MVC模板)。请注意，我发现我必须引用Google's documentation建议不必要的所有内容：
<%
Response.Headers.Add("Content-type", "text/json");
Response.AddHeader("Content-type", "application/json");
%>
{
"cols": [
{"id": "col_1", "label": "Date", "type": "string"},
{"id": "col_2", "label": "Score", "type": "number"}
],
"rows": [
<%
int index = 0;
foreach(KeyValuePair<string, double> item in Model.Performance ) { %>
{"c":[{"v":"<%= item.Key %>"}, {"v":<%= item.Value %>}]}<%= (index == Model.Performance.Count - 1) ? "" : "," %>
<% index++; %>
<%
}
%>
]
}然后，母版页包含以下内容：
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/js/myJavascriptFile.js" />然后在myJavascriptFile.js中(注意初始化方法的最后一行是google.setOnLoadCallback，它调用我的类中的方法，而不是drawChart)：
google.load('visualization', '1', {'packages':['corechart']});
var colors = {'blue': '#369', 'red': '#c22', 'green': '#283', 'yellow': '#c91'};
var MyClass = Class.create({
initialize: function() {
...
google.setOnLoadCallback(this.getTeamCharts);
},
getTeamCharts: function () {
$$(".chart-wrapper").each(function (div) {
var chartData = div.getData();
var parameters = {
...
};
new Ajax.Request('/endpoints/TeamChart.aspx', {
method: 'get',
parameters: parameters,
onSuccess: function(transport) {
var jsonData = transport.responseJSON;
var data = new google.visualization.DataTable(jsonData);
var chartColor = colors[parameters.TeamColor];
var chartDivId = 'chart_div_' + parameters.TeamIdAsString;
// Set chart options
var options = {
'chartArea': {'left':'15%','top':'15%','width':'80%','height':'70%'},
'legend': {'position': 'none'},
'lineWidth': 3,
'width': 262,
'height': 180,
'colors': [chartColor]
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
chart.draw(data, options);
}
});
});
}
});
document.observe("dom:loaded", function () {
var thing = new MyClass();
});我确信它可以进一步改进，但它是有效的！
Stack Overflow用户
发布于 2011-12-10 00:20:56
我以前处理过类似的情况，使用了一个隐藏字段，该字段作为请求的一部分返回，并以您想要的任何格式提供相关数据。不返回javascript。在ajax的成功回调中，您将获取并处理来自该输入的数据。
编辑：
基本上，如果您直接通过ajax html更新页面，并且不想更改其功能，那么将隐藏输入作为ajax响应的一部分
<input type="hidden" name="yourhiddeninputname" id="yourhiddeninputname"
value="whatever|data|you|want,blah,blah,blah" /> 然后，一旦将html注入到您的页面中，您将执行类似于
var yourdata = document.getElementById('yourhiddeninputname').value;
// do stuff with your data here.这是最好的选择吗？我没有把握。这真的取决于你是如何处理ajax的。我最初的评论来自于ASP.NET背景，在这种背景下，你常常指望某些类实例为你生成html，而你是从实际生成的html (和其他东西)中抽象出来的。当然还有其他方法可以处理这个问题，特别是如果您完全控制如何呈现和处理AJAX响应的话。
https://stackoverflow.com/questions/8448372
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号