Javascript 图表不从 mysql 填充数据

Question

我正在尝试查询一个 mysql 表以获取信息以使用数据来填充图表，但我得到一个 x 轴，其中“服装未定义”横跨它并且没有填充条形图。

我正在使用以下脚本来查询表 服装.php:

    if($_GET['action'] == 'clothingOrdered' && $_GET['id']){
$uid = $_GET['id'];

$sql = "SELECT clothing, orders FROM clothingOrder WHERE userid = '$uid'";
$query = mysqli_query($db_conx, $sql);
if($query){
$data = array();
foreach($query as $row){
$data[] = $row;

}

print json_encode($data);

}else{
echo mysqli_error($db_conx);

}



}else{
print 'not good';

}

这会产生:

[{"clothing":"tshirt","orders":"4"},{"clothing":"jeans","orders":"7"},{"clothing":"hats","orders":"34"},{"clothing":"dresses","orders":"12"},{"clothing":"jackets","orders":"27"},{"clothing":"毛衣","订单":"23"}]

图形区域:

<canvas id="myChart" width="400" height="400"></canvas>

数据的Js文件:

 $(document).ready(function(){
var id = $('#intro').data('id');

    $.ajax({
        url: '../php_parsers/clothing.php?action=clothingOrdered&id='+id,
        method: "GET",
        success: function(data) {
            console.log(data);
            var clothing = [];
            var orders = [];

            for(var i in data) {
                clothing.push("Clothing " + data[i].clothing);
                orders.push(data[i].orders);
            }

            var chartdata = {
                labels: clothing,
                datasets : [
                    {
                        label: 'Clothing ordered',
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: orders
                    }
                ]
            };

            var ctx = $("#myChart");

            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata
            });
        },
        error: function(data) {
            console.log(data);
        }
    });
});

我的图表所在的页面中还包含以下脚本:

        <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>

欢迎任何反馈。谢谢。

Answer 1

确保为 AJAX 请求设置数据类型参数。

$.ajax({
    url: '../php_parsers/clothing.php?action=clothingOrdered&id='+id,
    method: "GET",
    dataType: "json",
    success: function(data) {
        // ...
    },
    error: function(data) {
        console.log(data);
    }
});