2

我看不到我错过了什么。我似乎无法使用一点 ajax 运行 Google 图表 api。我究竟做错了什么？

<html>
  <head>      
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
   var dataSet =  $.ajax({
        url: "phpdata.php",
            async: false            
    }).responseText;
    var data = google.visualization.arrayToDataTable([
    dataSet
    ]);

    var options = {
      title: 'Company Performance'
    };

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


</script>
</head>
<body>
      <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

我的 php 数据：

['年份', '固定资产'],

['2009', 1],

['2010', 1.2],

['2011', 1.6]

4

2 回答 2

3

我不知道它是否会解决您的问题，我在渲染从 ajax 调用调用的部分时遇到了类似的问题。没有调用 drawChart 函数，这基本上意味着 setOnLoadCallback 没有按预期触发。为了克服这个问题，我修改了我的调用如下：

 google.load("visualization", "1", {packages:["corechart"]});
    //google.setOnLoadCallback(drawChart);
      $(function() {
        drawChart(); //works
      });
    function drawChart() {
   }

所以基本上我离开了谷歌方法，并制作了我自己的自调用函数，每当页面呈现或 div 更新时都会调用它。

于 2012-08-21T09:06:05.700 回答
1

问题可能与您的 ajax 调用有关：

<html>
  <head>      
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
   var dataSet =  [ ['year', 'fixedassets'],['2009', 1],['2010', 1.2],['2011', 1.6]];
    var data = google.visualization.arrayToDataTable(dataSet);
    var options = {
      title: 'Company Performance'
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
</head>
<body>
      <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
    </html>

这有效，因此任何现有代码都不是问题。您的 ajax 调用格式使用了一堆折旧的 jQuery 调用，并且无法访问您的服务器，我无法对其进行测试，但您可以尝试以下操作：

<html>
  <head>      
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
   $.get("phpdata.php", function(response_data) {
            var data = google.visualization.arrayToDataTable([response_data]);
        var options = {
          title: 'Company Performance'
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
        });
  }


</script>
</head>
<body>
      <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>

看看这是否有效。

我认为您遇到的问题是您有一个字符串："['year', 'fixedassets'], ['2009', 1], ['2010', 1.2], ['2011', 1.6]"并且您希望将其评估为数组：[['year', 'fixedassets'],['2009', 1],['2010', 1.2],['2011', 1.6]]。解决此问题的简单但不安全的方法是使用eval(). 你会说：

$.get("phpdata.php", function(response_data) {
   var data = google.visualization.arrayToDataTable(eval('[' + response_data + ']');

只要您完全控制服务器，并且您没有收到任何可能从您的服务器发送的用户输入，这不是很好但可以正常工作。

这样做的“正确”方法是从您的服务器发送实际的 json，而不是发送您发送的内容，然后使用JSON.parse(response_data).

于 2012-08-02T00:25:19.583 回答