Question

我已经查看过一些教程并在网上搜索但无法弄清楚我错过了什么。我尝试了各种可能性使它工作但没有运气。非常感谢这方面的帮助，因为我是新手。

$(document).ready(function () {
//  var ctx1 = $("#mycanvas");

 $.ajax({
  url:"http://localhost/multi000web/InspectionMenu.html",
    type: 'GET',
         dataType: 'json',
        success : function(data){

console.log(data);

            var Sitename =[];
            var CountOf =[];

            for (var i = 0; i < data.lenght ; i++){
                Sitename.push(data[i].Sitename);
                CountOf.push(data[i].CountOf);
            }

            var chartdata ={
                labels:Sitename,
                dataset: [
                   {
                   label: "Sitename",
               //    backgroundColor:["#F4A460","#2E8B57","#E0E0E0"],

                   data: [data]
                       }

                ]

            };

               //options
var options = {
    responsive: true,
    title: {
        display: true,
        position: "top",
        text: "Doughnu Chart",
        fontSize: 18,
        fontColor: "#111"
    },
    legend: {
        display: true,
        position: "bottom",
        labels: {
            fontColor: "#333",
            fontSize: 16
        }
    }
};
                        //get the doughnut chart canvas
var ctx1 = $("#mycanvas");
//create Chart class object
var chart1 = new Chart(ctx1, {
    type: "doughnut",
    data: chartdata ,
    options: options
});



        },
            error :function(data) {

            }
 });



 });

Answer 1

假设，您的响应json（格式）看起来有点像 ...

data

您需要正确生成并使用$(document).ready(function() { $.ajax({ url: "https://istack.000webhostapp.com/json/t3.json", type: 'GET', dataType: 'json', success: function(data) { var Sitename = []; var CountOf = []; data.forEach(function(e) { Sitename.push(e.Sitename); CountOf.push(e.CountOf); }) var chartdata = { labels: Sitename, datasets: [{ label: "Sitename", data: CountOf, backgroundColor: ["#F4A460", "#2E8B57"], }] }; //options var options = { responsive: true, title: { display: true, position: "top", text: "Doughnu Chart", fontSize: 18, fontColor: "#111" }, legend: { display: true, position: "bottom", labels: { fontColor: "#333", fontSize: 16 } } }; //get the doughnut chart canvas var ctx1 = $("#mycanvas"); //create Chart class object var chart1 = new Chart(ctx1, { type: "doughnut", data: chartdata, options: options }); }, error: function(data) {} }); });和<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <canvas id="mycanvas"></canvas>数组才能使圆环图工作。

以下是如何创建圆环图......

<?php
include("config.php");
$query = "SELECT s.id as id, u.id as id_user, u.nama_pegawai, s.score, s.timestamp
FROM t_score s
INNER JOIN pegawai u ON u.id = s.id_user
GROUP BY s.id, u.id , u.nama_pegawai, s.score, s.timestamp
ORDER BY s.score DESC"; 
$result = pg_query($query);
$counter = 0;
while($row = pg_fetch_array($result)){   //Creates a loop to loop through results
    ?>

    <tbody>
        <tr>
            <!-- <td><?php echo $row["id"]; ?></td> -->
            <td><?php echo ++$counter; ?></td>
            <td><?php echo $row["nama_pegawai"]; ?></td>
            <td><?php echo $row["score"]; ?></td>
            <td><?php echo $row["timestamp"]; ?></td>
            <td><?php echo ++$category ; ?> </td>

            <?php 
        }
        pg_close();
        ?>
    </tr>
</tbody>

{{1}}

尝试使用dql结果chartjs的圆环图

1 个答案: