Javascript图表不从mysql填充数据答案

【问题标题】：Javascript charts not populating data from mysqlJavascript图表不从mysql填充数据
【发布时间】：2017-08-20 22:48:42
【问题描述】：

我正在尝试查询 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","订单":"34"},{"clothing":"dresses","orders":"12"},{"clothing":"夹克","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>

欢迎任何反馈。谢谢。

【问题讨论】：

有没有JS错误？我使用您应该加载的数据创建了这个Fiddle，并且图表按预期呈现（包括 X 轴）。
不，我得到的唯一错误与引导程序有关。我想我应该再试一次
即使只有 6 个，我也得到 7 个“未定义的衣服”
使用您的数据和代码为我工作：codepen.io/skunkbad/pen/prLgEQ
会不会是你的 ajax 配置没有指定数据类型？如果我期待 json，我通常会声明 dataType: 'json'。 jQuery 文档说，如果不存在，它将尝试智能地猜测数据类型，但我以前见过它没有这样做很多次。

标签： javascript php mysql

【解决方案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);
    }
});

【讨论】：