Я хотел бы манипулировать данными из базы данных, чтобы использовать их с моей пузырьковой диаграммой.
Вот что я сделал:
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) A 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
Моя проблема?Все результаты помещаются в один «пузырь», как если бы мы, наконец, хотели столбик, за исключением того, что это пузырьки.Итак, я вижу свою ошибку, но не знаю, как ее исправить, я должен сделать еще один цикл, чтобы ** создать пузырь по результату **?Как продолжить?
> Моя пузырьковая диаграмма, без bubles ...: https://zupimages.net/up/18/26/i936.png
Заранее благодарю за то, что уделили время, чтобы прочитать все это и попробоватьчтобы помочь мне.
PS: Извините за мой плохой английский ...