如何使用Ajax/JSON方法为chart.js (气泡图)提供数据库数据？

Question

我想从数据库中操作数据，以便将它与我的气泡图一起使用。

以下是我所做的：

1) data.php文件，该文件将请求的数据以JSON格式放置：​

<?php
/* data.php
 * Description : Retourne le score Page Speed, le score Yslow et le libelle du site depuis la BDD.*/
​
//Header > JSON
header('Content-Type: application/json');
​
//Connexion Base de donnée
include ("../inc/connexion_bd.inc.php");
​
//Requête
$query = sprintf("SELECT
    libelle_site,
    score_pagespeed,
    score_yslow
FROM
    sites
INNER JOIN ANALYSE ON ANALYSE
    .id_site = sites.id_site
INNER JOIN secteur_activite ON sites.id_secteur = secteur_activite.id_secteur
INNER JOIN(
    SELECT sites.id_site,
        MAX(date_analyse) AS last_analyse
    FROM
        sites
    INNER JOIN ANALYSE ON ANALYSE
    .id_site = sites.id_site
GROUP BY
    sites.id_site
) AS TEMP
ON
    TEMP.id_site = sites.id_site AND TEMP.last_analyse = ANALYSE.date_analyse
WHERE
    secteur_activite.id_secteur = 5");
​
//Execution rapide de la requête
$result = $bdd->query($query);
​
//Boucle pour chaques résultats
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}
​
//Affichage du résultat
print json_encode($data);

>结果在控制台中: https://zupimages.net/up/18/26/6jwb.png

2)一个buble_db_php.js文件，从这个页面接收数据并创建图形(Ajax) :

$(document).ready(function () {
​
    /**
     * Appel de la page data.php pour mettre les résultats de la BDD dans un tableau
     */
    $.ajax({
        url: "http://127.0.0.1/projets/Multi_Evaluation_Tool/api/data.php",
        type: "GET",
        success: function (data) {
            console.log(data);
​
            var site = {
                //Libelle du site
                label: [],
                //Score 1
                x: [],
                //Score 2
                y: []
            };
​
            var len = data.length;
​
            for (var i = 0; i < len; i++) {
                site.label.push(data[i].libelle_site); //On place le libelle du site dans la variable site.label
                site.x.push(data[i].score_pagespeed); //On place le score PageSpeed du site dans la variable site.x
                site.y.push(data[i].score_yslow);      //On place le score Yslow du site dans la variable site.y
            }
​
            console.log(site);
​
            //On récupère l'ID du graphique (canvas) situé dans la page result.php (bubble chart)
            var ctx = $("#bubble-chart");
​
            //Configuration des données et des options du graphique
            var data = {
                labels: ["Rapport entre les scores"],
                datasets: [
                    {
                        label: site.label, //Libelle du site
                        backgroundColor: "rgba(255,221,50,0.2)",
                        borderColor: "rgba(255,221,50,1)",
                        data: [{
                                x: site.x, //Score 1
                                y: site.y, //Score 2
                                r: 10
                            }]
                    }
                ]
            };
​
            var options = {
                title: {
                    display: true,
                    text: 'Rapport PageSpeed / Yslow'
                },
                scales: {
                    yAxes:
                            [{
                                    scaleLabel: {
                                        display: true,
                                        labelString: "Score 1"
                                    },
                                    ticks: {
                                        //Commencer à zéro ?
                                        beginAtZero: true,
                                        //Valeur maximum
                                        max: 100
                                    }
                                }],
                    xAxes:
                            [{
                                    scaleLabel: {
                                        display: true,
                                        labelString: "Score 2"
                                    },
                                    ticks: {
                                        //Commencer à zéro ?
                                        beginAtZero: true,
                                        //Valeur maximum
                                        max: 100}
                                }]
                }
            };
            var chart = new Chart(ctx, {
                type: "bubble",
                //On appel les données et les options configurées :
                data: data,
                options: options
            });
        },
        error: function (data) {
            console.log(data);
        }
    });
});

>结果在控制台中: https://zupimages.net/up/18/26/845x.png

我的问题？所有的结果都放在一个“泡沫”中，就好像我们最终想要一个酒吧一样，只是它是个泡泡。因此，我看到了我的错误，但不知道如何纠正它，我必须做另一个循环，以**创建一个气泡的结果**？怎么继续？

>我的泡泡图，没有气泡.: https://zupimages.net/up/18/26/i936.png

提前感谢你抽出时间继续阅读这一切并尽力帮助我。

对不起我英语不好..。

Answer 1

解决了，谢谢你的帮助！

https://examples.lartak.fr/graphs/bulles

jQuery(document).ready(function ($) {

var getSites = function () {

    var ctx = $("#bubble-chart");
    $.ajax({
        url: 'http://127.0.0.1/projets/Multi_Evaluation_Tool/api/data.php',
        type: 'GET',
        dataType: 'JSON',
        success: function (results) {

            var dynamicColors = function () {
                var r = Math.floor(Math.random() * 255);
                var g = Math.floor(Math.random() * 255);
                var b = Math.floor(Math.random() * 255);
                return "rgb(" + r + "," + g + "," + b + ")";
            };

            var sites = [];

            for (var i = 0; i < results.length; i++) {

                var site = {
                    label: results[i].libelle_site.toString(),
                    backgroundColor: dynamicColors(),
                    borderColor: "rgb(69,70,72)",
                    radius: 10,
                    borderWidth: 1,
                    hoverBorderWidth: 2,
                    hoverRadius: 5,
                    data: [
                        {
                            x: Number(results[i].score_pagespeed),
                            y: Number(results[i].score_yslow),
                            r: 10
                        }
                    ]
                };
                sites.push(site);
                //console.log(sites);
            }
            console.log(sites);

            var data = {labels: ["Rapport entre les scores"], datasets: sites};
            var options = {
                title: {display: true, text: 'Rapport score PageSpeed / Indice'},
                scales: {
                    yAxes:
                            [
                                {
                                    scaleLabel: {display: true, labelString: "Scores : Page Speed"},
                                    ticks: {beginAtZero: true, max: 100}
                                }
                            ],
                    xAxes:
                            [
                                {
                                    scaleLabel: {display: true, labelString: "Indice"},
                                    ticks: {beginAtZero: true, max: 100}
                                }
                            ]
                }
            };
            new Chart(ctx, {type: "bubble", data: data, options: options});
        },
        error: function (results) {
            console.log(results);
        }
    });
};
getSites();

})；