Javascript 如何在图形中显示MySQL数据？

我想用下面的代码以图形的形式从mysql中检索数据。但是，没有显示任何内容。有人能帮我吗

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);

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

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      var options = {'title':'Ticket Sales','width':500,'height':400};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data,options); 
  }
</script>
<?php
echo("<div id='chart_div'></div>");
?>

---

如前所述，我认为您需要将代码移动到成功回调中：

function drawChart() {
    $.ajax({
        url: "graphdata.php",
        type: "GET",
        dataType:"json",
        success: function(jsonData, textStatus, jqXHR) {
            // Create our data table out of JSON data loaded from server.
            var data = new google.visualization.DataTable(jsonData);

            var options = {'title':'Ticket Sales','width':500,'height':400};

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

[编辑]可以在上找到工作示例（带有一些模拟数据）

[edit2]使用重复问题中提供的输出更新上的示例：

{
    "cols": [
        {
            "label":"Month",
            "type":"string"
        },{
            "label":"Weekly Sales",
            "type":"string"
        }
    ],
    "rows": [
        {
            "c":[
                {"v":"3"},
                {"v":"jaspreet singh "}
            ]
        },{
            "c":[
                {"v":"3"},
                {"v":"joseph swanson"}
            ]
        }
    ]
}

服务器返回的JSON错误，对象应如下所示：

  "cols": [
    {
      "label":"Month",
      "type":"string"
    },{
      "label":"Weekly Sales",
      "type":"number"
    }
  ],
  "rows": [
    {
      "c":[
        {"v":"jaspreet singh "},
        {"v":"3"}
      ]
    },{
      "c":[
        {"v":"joseph swanson"},
        {"v":"3"}
      ]
    }
  ]
};

现在所需要的改变应该是显而易见的。希望这有帮助

[edit3]

getdata.php

应包含以下代码段imho：

$data = array(
    'cols' => array(
        array('label' => 'Month', 'type' => 'string'),
        array('label' => 'Ticket Sales', 'type' => 'number')
    ),
    'rows' => array()
);

while($row = mysql_fetch_row($result)) {
    $data['rows'][] = array(
        'c' => array(
            array('v' => $row[1]),
            array('v' => $row[0])
        )
    );
}

---

什么是graphdata.php？当你使用

async:true

一只小猫死的时候，我附加了graphdata.php！请正确使用

$.ajax

，您只需将代码移动到

success（）

回调中（有关详细信息，请参阅）。我删除了async:true，然后显示消息：表中没有列。您确定调用了正确的URL吗

graphdata.php

vs

getdata.php

@mamtasingla如果直接在浏览器中打开URL，您会得到任何输出吗？输出：表中没有列。@mamtasingla听起来好像是您的问题，不是吗？如果您还需要帮助，请打开一个新问题。我的示例显示，建议的更改与。从您的错误消息中，我认为返回的json格式错误。使用jsbin上的模拟更改输出，在那里调试，然后修复您的php代码。@nietonfir：有人问了一个新问题，但结果看起来像是重复的，尽管略有不同。因此，我认为一个新问题在这里可能是多余的（我最初投票决定搁置，但现在撤回）。

$data = array(
    'cols' => array(
        array('label' => 'Month', 'type' => 'string'),
        array('label' => 'Ticket Sales', 'type' => 'number')
    ),
    'rows' => array()
);

while($row = mysql_fetch_row($result)) {
    $data['rows'][] = array(
        'c' => array(
            array('v' => $row[1]),
            array('v' => $row[0])
        )
    );
}