Maison > développement back-end > tutoriel php > Comment utiliser PHP et Vue.js pour implémenter des fonctions de filtrage et de tri des données sur les graphiques

Comment utiliser PHP et Vue.js pour implémenter des fonctions de filtrage et de tri des données sur les graphiques

WBOY
Libérer: 2023-08-27 11:52:01
original
854 Les gens l'ont consulté

Comment utiliser PHP et Vue.js pour implémenter des fonctions de filtrage et de tri des données sur les graphiques

Comment utiliser PHP et Vue.js pour implémenter des fonctions de filtrage et de tri des données sur des graphiques

Dans le développement Web, les graphiques sont un moyen très courant d'afficher des données. Les fonctions de filtrage et de tri des données sur les graphiques peuvent être facilement mises en œuvre à l'aide de PHP et Vue.js, permettant aux utilisateurs de personnaliser l'affichage des données sur les graphiques et d'améliorer la visualisation des données et l'expérience utilisateur.

Tout d’abord, nous devons préparer un ensemble de données à utiliser dans les graphiques. Supposons que nous ayons un tableau de données contenant trois colonnes : nom, âge et notes. Les données sont les suivantes :

.
Nom âge grades
Zhang San 18 90
李Quatre 20 80
Wang Wu 22 85
Zhao Liu 19 95

Ensuite, nous utilisons PHP pour transmettre les données à Vue. js, Et implémenter des fonctions de filtrage et de tri des données sur le front-end. Tout d'abord, dans le fichier PHP backend, nous pouvons interroger les données et les renvoyer au frontend en utilisant le code suivant :

<?php
// 连接数据库
$conn = new mysqli("localhost", "root", "password", "database");

// 查询数据
$sql = "SELECT * FROM students";
$result = $conn->query($sql);

// 将查询结果转化为JSON格式返回给前端
$data = [];
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}
echo json_encode($data);

// 关闭数据库连接
$conn->close();
?>
Copier après la connexion

En utilisant Vue.js dans le frontend, nous pouvons récupérer et lier les données via une requête ajax aux variables de données requises. pour le graphique ci-dessus :

new Vue({
    el: "#app",
    data: {
        students: [],
        filteredStudents: []
    },
    mounted() {
        // 发送ajax请求获取数据
        axios.get("data.php").then(response => {
            this.students = response.data;
            this.filteredStudents = response.data;
        });
    },
    methods: {
        filterData() {
            // 根据选择的筛选条件,过滤数据并更新到filteredStudents
        },
        sortData(fieldName, direction) {
            // 根据指定的字段和排序方向,对数据进行排序并更新到filteredStudents
        }
    }
});
Copier après la connexion

Dans le code frontal, nous avons créé une instance Vue et défini deux variables dans l'attribut data : Students et filteredStudents, qui stockent respectivement les données originales et les données filtrées. Envoyez une requête ajax pour obtenir des données dans Mounted() et liez les données à la variable correspondante dans la méthode then().

Ensuite, nous pouvons ajouter des éléments interactifs pour filtrer et trier sur la page. Par exemple, dans la liste déroulante des conditions de filtre, nous pouvons ajouter le code suivant :

<select v-model="ageFilter" @change="filterData">
    <option value="">全部年龄</option>
    <option value="18">18岁</option>
    <option value="19">19岁</option>
    <option value="20">20岁</option>
    <option value="21">21岁</option>
    <option value="22">22岁</option>
</select>
Copier après la connexion

Dans la méthode sortData(), nous pouvons utiliser la méthode de tri des tableaux de JavaScript pour trier les données. Par exemple, le code pour trier par nom par ordre croissant est le suivant :

sortData(fieldName, direction) {
    this.filteredStudents.sort((a, b) => {
        return a[fieldName] > b[fieldName] ? 1 : -1;
    });
    if (direction === "desc") {
        this.filteredStudents.reverse();
    }
}
Copier après la connexion

Enfin, utilisez la liaison de données Vue en HTML pour afficher les données sur le graphique :

<table>
    <tr v-for="student in filteredStudents">
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
        <td>{{ student.grade }}</td>
    </tr>
</table>
Copier après la connexion

Avec l'exemple de code ci-dessus, nous pouvons implémenter le graphique en utilisant Fonctions de filtrage et de tri des données PHP et Vue.js. Les utilisateurs peuvent sélectionner des données spécifiques via des conditions de filtrage, puis trier les données via la fonction de tri, améliorant ainsi la visualisation des données graphiques et l'expérience utilisateur.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal