使用Google Charts展示MySQL查询结果时遇arrayToDataTable错误求助

这个错误的核心原因是：Google Charts的arrayToDataTable方法需要的是纯二维数组结构（第一行是表头数组，后续是数据行数组），但你的PHP返回的是关联对象数组的JSON，转换成JavaScript后不符合要求的格式。

举个直观的例子，你的PHP当前输出的JSON大概是这样：

[{"id":1,"rating":5},{"id":2,"rating":4},{"id":3,"rating":3}]

而Google Charts需要的格式是：

[["ID","Rating"],[1,5],[2,4],[3,3]]

下面给你两种可行的解决方案：

方案一：修改PHP代码，输出符合要求的JSON格式 #

直接在PHP里构造好Google Charts需要的二维数组结构，包含表头和数据行：

<?php
include('db.php');
$mysqli = SQLConnect();
$myArray = array();
// 先添加表头行
$myArray[] = array('ID', 'Rating');
$sql = "select id, rating from ratings order by RateDate DESC limit 5";
if ($result = $mysqli->query($sql)) {
    while($row = $result->fetch_assoc()) {
        // 将关联数组转为索引数组，确保数据类型正确（比如id和rating转成数字）
        $myArray[] = array((int)$row['id'], (int)$row['rating']);
    }
    echo json_encode($myArray);
}
$result->close();
$mysqli->close();
?>

修改后，前端代码不需要大改，直接用arrayToDataTable(jsonData)就能正常解析。

方案二：修改前端代码，转换数据格式 #

如果不想改动PHP，可以在前端把返回的对象数组转换成Google需要的二维数组：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart1);

function drawChart1() {
    var options = {
        title: 'Last 5 Ratings',
        height: 400,
        legend: { position: 'bottom' }
    };

    // 推荐使用异步请求，避免阻塞页面
    $.post({
        url: '../resources/db/getDataForChart1.php',
        dataType:"json",
        async: true, // 改成true，同步请求不推荐
        success: function(jsonData){
            // 构造表头+数据行的二维数组
            var tableData = [['ID', 'Rating']];
            jsonData.forEach(function(item) {
                // 确保rating是数字类型，避免图表显示异常
                tableData.push([item.id, parseInt(item.rating)]);
            });
            var data = new google.visualization.arrayToDataTable(tableData);
            var chart = new google.visualization.BarChart(document.getElementById('lastEvaluations'));
            chart.draw(data, options);
        }
    });
}

额外注意事项 #

• 尽量不要用async: false，同步AJAX请求会阻塞浏览器渲染，影响用户体验；
• 确保数据类型正确：如果rating是数字类型，要避免在JS里变成字符串（比如用parseInt或Number()转换），否则图表可能无法正确渲染；
• 可以在浏览器控制台里打印jsonData，确认返回的数据格式是否符合预期，方便排查问题。

内容的提问来源于stack exchange，提问作者clorisanderton