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

预先感谢您抽出宝贵的时间阅读所有这些内容并尽力帮助我。

PS：对不起，我的英语不好...

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();

}）;

如何通过Ajax / JSON方法将数据库中的数据用于chart.js（气泡图）？

1 个答案: