Récupération des données
Dans cette étape, vous allez apprendre à récupérer les données à partir du fichier data.json
et à les stocker dans les structures de données nécessaires.
- Ouvrez le fichier
index.html
dans votre éditeur de code.
- Localisez la section
// TODO
dans le code JavaScript.
- Créez deux objets pour stocker les données hebdomadaires et mensuelles :
// TODO
let weekData = {
x: [],
y: []
};
let monthData = {
x: [],
y: []
};
- Implémentez la fonction
mySetOption()
pour mettre à jour les options du graphique en fonction des données passées à la fonction.
function mySetOption(data) {
option.xAxis.data = data.x;
option.series[0].data = data.y;
myChart.setOption(option);
}
- Utilisez la méthode
axios.get()
pour récupérer les données à partir du fichier data.json
. La réponse de l'appel API contiendra les données dans la propriété res.data.data
.
axios.get("./data.json").then((res) => {
const data = res.data.data;
// Traitez les données ici
});
- Dans la fonction de rappel de la méthode
then()
, itérez sur l'objet data
et traitez les données de la durée d'étude pour chaque jour. Calculez la durée totale d'étude pour chaque semaine et chaque mois, et stockez les résultats dans les objets weekData
et monthData
respectivement.
for (const key in data) {
let weekCount = (monthCount = 0),
weekNum = 1;
for (let i = 0; i < data[key].length; i++) {
weekCount += data[key][i];
monthCount += data[key][i];
if (
(i + 1) % 7 === 0 ||
(data[key].length - i <= 7 && i === data[key].length - 1)
) {
weekData.x.push(`Semaine ${weekNum++} (${key})`);
weekData.y.push(weekCount);
weekCount = 0;
}
}
monthData.x.push(key);
monthData.y.push(monthCount);
}
- Après avoir traité les données, appelez la fonction
mySetOption()
et passez l'objet weekData
pour afficher les statistiques hebdomadaires par défaut.
mySetOption(weekData);
- L'effet du code après cette étape de traitement est le suivant :
// TODO
let weekData = {
x: [],
y: []
},
monthData = {
x: [],
y: []
};
function mySetOption(data) {
option.xAxis.data = data.x;
option.series[0].data = data.y;
// réinitialiser
myChart.setOption(option);
}
axios.get("./data.json").then((res) => {
const data = res.data.data;
for (const key in data) {
let weekCount = (monthCount = 0),
weekNum = 1;
for (let i = 0; i < data[key].length; i++) {
weekCount += data[key][i];
monthCount += data[key][i];
if (
(i + 1) % 7 === 0 ||
(data[key].length - i <= 7 && i === data[key].length - 1)
) {
weekData.x.push(`Semaine ${weekNum++} (${key})`);
weekData.y.push(weekCount);
weekCount = 0;
}
}
monthData.x.push(key);
monthData.y.push(monthCount);
}
mySetOption(weekData);
});