Question

我正在尝试使用chart.js lib将数据输出到图表上。我已经成功地提取了我需要的数据并创建了数据集但由于某种原因它只是不会渲染到图表上。

我有三个文件：

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){

        },
    });

});

teamData.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);

?>

teams.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('Content-type: application/json');
print json_encode($data);

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

1 个答案: