php - 数据不会绘制到我的图表上

Question

我正在尝试使用chart.js 库将数据输出到图表上。我已成功提取所需的数据并创建了数据集，但由于某种原因它不会呈现到图表上。

我有三个文件:

teamData.js

$(document).ready(function(){

    $.ajax({
        url : "http://localhost/acredashAdv/teamData.php",
        type : "GET",
        success :function(data){
            console.log(data);

            var score_1 = [];
            var score_2 = [];

            for (var i in data) {
                 score_1.push(data[i].score_1);
                 score_2.push(data[i].score_2);
            }

            var chartata = {
                labels: [
                 "Strategic Development and Ownership", 
                 "Driving change through others", 
                 "Exec Disposition", 
                 "Commercial Acumen", 
                 "Develops High Performance Teams", 
                 "Innovation and risk taking", 
                 "Global Leadership", 
                 "Industry Leader"
                 ],

                datasets : [
                    {
                          label: "user 1",
                          backgroundColor: "rgba(0,0,0,0)",
                          borderColor: "#B71C1C",
                          data: score_1,
                    },
                    {
                          label: "user 2",
                          backgroundColor: "rgba(0,0,0,0)",
                          borderColor: "#B71C1C",
                          data: score_2
                    },                                                                                              

                ]
            };

            var ctx = $("#mycanvas");

            var LineGraph = new Chart(ctx, {
                type: 'radar',
                data: chartata,
                animationEasing: 'linear'
            }); 
        },
        error :function(data){

        },
    });

});

团队数据.php

<?php
include 'config.php';

$query = sprintf("SELECT member_id, firstName, lastName, score_1, score_2, score_3, score_4, score_5, score_6, score_7, score_8 FROM members");

$result = $conn->query($query);

$data = array();
foreach ($result as $row) {
  $data[] = $row;
}

$result->close();
$conn->close();

print json_encode($data);

?>

团队.php

<div style="max-width: 500px;">
  <canvas id="mycanvas" class="container"></canvas>
</div>

在我的 console.log 上，我可以看到数据正确传输:

[{"member_id":"144","firstName":"Dan","lastName":"Barrett","score_1":"4","score_2":"2","score_3":"3","score_4":"5","score_5":"1","score_6":"3","score_7":"5","score_8":"4"},{"member_id":"145","firstName":"Jon","lastName":"Smith","score_1":"3","score_2":"4","score_3":"1","score_4":"2","score_5":"1","score_6":"2","score_7":"3","score_8":"4"},{"member_id":"146","firstName":"Dan","lastName":"Barrett","score_1":"1","score_2":"2","score_3":"1","score_4":"1","score_5":"4","score_6":"1","score_7":"4","score_8":"3"}]

但是除非我搞混了，否则它不会提取数据......我最终会得到一个空图表。

Answer 1

也许可能是您的 Chart.js 的版本，这是您正在运行的代码:

https://jsfiddle.net/6xdvj5u3/

使用此版本的 Chart.js

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js

尝试采纳 PabloMartinez 的建议，在 PHP 文件中的打印行之前添加 header :

header('Content-type: application/json');
print json_encode($data);