Question

我正在尝试查询mysql表以获取信息以使用数据填充图表，但我得到的x轴上有“衣服未定义”，并且条形图没有填充。

我使用以下脚本来查询表 clothing.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”，“订单 “：” 34 “}，{” 服装 “：” 衣服 “ ”订单“： ”12“}，{ ”服装“： ”夹克“， ”订单“： ”27“}，{ ”服装“：”毛衣”， “订单”： “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请求设置dataType参数。

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

Javascript图表没有填充mysql中的数据

1 个答案: