0

我有一个控制器，它以 Google Charts 期望的格式返回（很好）格式化的 JSON。我可以通过导航来查看输出，http://localhost:9000/manager/echoVariablesOP如下：[["foo",3],["foo",3]]

我想做一个 AJAX 调用，但无法将此 JSON 传递给 Google Charts。我可以确认正在接收 JSON，我在 Chrome 的浏览器检查器的网络选项卡中进行了验证。

但是我正在DOM Exception 8将这个 JSON 字符串传递给 Google Charts。

这是创建图表的视图：

#{extends 'main.html' /} #{set title:'Home' /} #{set 'moreScripts'}
#{/set}
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>

<script type="text/javascript">
//$.get()
$(document).ready(function() {
    $("#result").html();
    $.get(
        '/manager/echoVariables',
        {var1: "foo", var2: 5},
        function(responseText){
            $("#result").html(responseText);
        },
        "json"
    );
});


</script>

<body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
    <div id="result"></div>
</body>

如何让饼图显示我的值，而不是片段中给出的值？

谢谢。

4

1 回答 1

1

你的代码有两个问题。首先，您在 div 上使用 jQueryhtml()函数#result，但您传递的是 javascript 对象，而不是函数期望的字符串。如果您只是想查看数据，可以将其更改为类似

$.get(
    '/manager/echoVariables',
    {var1: "foo", var2: 5},
    function(responseText){
        $("#result").html(JSON.stringify(responseText));
    },
    "json"
);

当然，另一个问题是您实际上并没有将结果数据传递给谷歌图表 API。为此，您需要chart.draw使用从 AJAX 调用返回的数据而不是示例中的数据进行调用。

于 2013-02-27T16:57:47.950 回答