从异步 AJAX 响应加载 Google Chart

Question

在旧的 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()ing 服务器端响应吗？

我怎样才能克服这个问题？有 PHP 包装器来帮助解决这个问题吗？还是还有其他我忽略的原因？

非常感谢

Answer 1

最后我解决这个问题的方法非常明显。我只需要跳出自己的想法，从不同的角度来看待它。

我正在尝试使用 PHP 在服务器端处理数据库信息并创建 Google Chart（在本例中为饼图）的所有跑腿工作。然后将其作为 AJAX 响应返回。

实际上，我所需要做的就是返回创建饼图所需的数据（以及一些额外的元数据，例如目标元素 ID）。我是用 JSON 来做的。然后，通过浏览 Google Charts 文档，我能够找到如何使用客户端 javascript 触发 API 来加载返回的 JSON 数据。然后让 Google 代码在客户端渲染图表 - 所以我基本上将所有渲染责任转移到客户端浏览器。这就是新旧图表 API 的不同之处。

这需要大量的尝试和错误，并需要 Firebug 的大量帮助。值得一提的一个大问题是，您需要在收到 JSON 响应之前加载所有 Google JSAPI - 以便在初始页面呈现时 - 您必须做的一件事是：

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

确保它在页面呈现时加载。如果您在页面完全呈现后调用此方法，则页面将重新加载。

希望这对某人有帮助。

Answer 2

感谢 andyg1 和 Ascendant，我能够让它像这样工作（使用 PrototypeJS 而不是 jQuery，但想法是相同的）。由于这并不明显，我将展示所有步骤。

Ajax 端点仅返回 json，如下所示（.NET MVC 模板）。请注意，我发现我必须引用 Google 文档 未建议的所有内容是必要的：

<% 
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();
});

我确信它可以进一步改进，但它作品！

Answer 3

我过去曾使用隐藏字段处理过类似的情况，该隐藏字段作为请求的一部分返回，并以您想要的任何格式提供相关数据。没有返回 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 响应的呈现和处理方式。