Comment obtenir des effets de graphiques statistiques de regroupement et de classification via PHP et Vue.js

Comment obtenir des effets de graphiques statistiques de regroupement et de classification via PHP et Vue.js

Introduction :
Les graphiques statistiques sont l'un des moyens importants de visualisation des données, qui peuvent nous aider à comprendre les données de manière plus intuitive. Dans cet article, nous présenterons comment utiliser PHP et Vue.js pour obtenir des effets de graphiques statistiques de regroupement et de classification. Nous fournissons également des exemples de code pour une meilleure compréhension.

Étape 1 : Préparer les données
Tout d'abord, nous devons préparer certaines données pour les statistiques. Dans cet exemple, nous prendrons les données de vente comme exemple. La structure des données est la suivante :

$data = [
    ['group' => 'A', 'category' => 'cat1', 'amount' => 100],
    ['group' => 'A', 'category' => 'cat1', 'amount' => 150],
    ['group' => 'A', 'category' => 'cat2', 'amount' => 200],
    ['group' => 'B', 'category' => 'cat2', 'amount' => 300],
    ['group' => 'B', 'category' => 'cat1', 'amount' => 180],
    ['group' => 'C', 'category' => 'cat1', 'amount' => 120],
    ['group' => 'C', 'category' => 'cat2', 'amount' => 250],
];

Étape 2 : Traitement des données backend
Ensuite, nous devons traiter les données pour faciliter l'affichage des graphiques front-end.

Exemple de code PHP :

$groupedData = array();

foreach($data as $row) {
    $group = $row['group'];
    $category = $row['category'];
    $amount = $row['amount'];

    if(!isset($groupedData[$group])) {
        $groupedData[$group] = array();
    }

    if(!isset($groupedData[$group][$category])) {
        $groupedData[$group][$category] = 0;
    }

    $groupedData[$group][$category] += $amount;
}

echo json_encode($groupedData);

Étape 3 : Affichage front-end
Maintenant que nous avons traité les données back-end, nous utilisons Vue.js pour l'affichage front-end.

Exemple de code HTML :

<div id="app">
    <div v-for="(groupData, group) in groupedData" :key="group">
        <h3>{{ group }}</h3>
        <table>
            <tr v-for="(amount, category) in groupData" :key="category">
                <td>{{ category }}</td>
                <td>{{ amount }}</td>
            </tr>
        </table>
    </div>
</div>

Exemple de code Vue.js :

new Vue({
    el: '#app',
    data: {
        groupedData: [],
    },
    mounted() {
        axios.get('/api/data.php')
            .then(response => {
                this.groupedData = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    },
});

Grâce à l'exemple de code ci-dessus, nous avons implémenté l'affichage des données basé sur group和category进行数据分组和分类的功能。在前端展示的代码中，我们使用了Vue.js的v-for指令来循环遍历数据，并通过插值表达式{{ }}.

Résumé :
Dans cet article, nous avons présenté comment utiliser PHP et Vue.js pour obtenir des effets de graphiques statistiques de regroupement et de classification. Nous traitons d'abord les données via PHP, puis utilisons Vue.js pour l'affichage frontal. J'espère que cet article pourra aider tout le monde à comprendre et à maîtriser comment obtenir des effets de graphique statistique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!