' undefined不是一个功能'使用JSON时使用谷歌图表

时间:2014-06-26 09:01:24

标签: javascript json charts google-visualization

我有一些JSON数据,想要试用谷歌图表。我使用了herehere

文档中的示例
 <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API
    google.load("visualization", "1", {packages:["corechart"]});

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

    function drawChart() {
      var jsonData = $.ajax({
          url: "get-stats.php",
          dataType:"json",
          async: false
          }).responseText;

      var options = {
        title: 'Stats'
      };    
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart =  new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the chart-->
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>

chart.draw()被调用时,网站上会出现错误“未定义不是函数”。

我的JSON文件像这样加载(get-stats.php)

<?php 

$string = file_get_contents("stats.json");
echo $string;

?>

JSON的格式如下:

{
    "cols":  [
                 {
                     "id":  "date",
                     "label":  "Date",
                     "type":  "datetime"
                 },
                 {
                     "id":  "cntall",
                     "label":  "Total",
                     "type":  "number"
                 },
                 {
                     "id":  "cntpers",
                     "label":  "Pers",
                     "type":  "number"
                 }
             ],
    "rows":  [
                 {
                     "c":  [
                               {
                                   "v":  "new Date(2013, 11, 17, 9, 54, 0)"
                               },
                               {
                                   "v":  320
                               },
                               {
                                   "v":  123
                               }
                           ]
                 },
                 {
                     "c":  [
                               {
                                   "v":  "new Date(2013, 11, 17, 11, 4, 0)"
                               },
                               {
                                   "v":  300
                               },
                               {
                                   "v":  67
                               }
                           ]
                 }
              ]
}

我怀疑它与JSON有关。所有代码都来自谷歌示例。

1 个答案:

答案 0 :(得分:0)

var data = new google.visualization.DataTable($jsonData);

试试这个

$jsondata => json_encode($jsonData);

并将其与php标签

放在一起