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

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

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>

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

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>

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!