PHP と Vue.js を使用してグラフにデータのフィルタリングと並べ替え機能を実装する方法

PHP と Vue.js を使用してグラフにデータ フィルタリングおよび並べ替え機能を実装する方法

Web 開発では、グラフはデータを表示する非常に一般的な方法です。 PHP と Vue.js を使用すると、グラフ上にデータのフィルタリングおよび並べ替え機能を簡単に実装でき、ユーザーがグラフ上のデータの表示をカスタマイズできるようになり、データの視覚化とユーザー エクスペリエンスが向上します。

まず、グラフで使用するデータのセットを準備する必要があります。名前、年齢、学年の 3 つの列を含むデータ テーブルがあるとします。データは次のとおりです:

Name	Age	grade
张三	18	90
李4	20	80
王五	22	85
赵六	19	95

次に、PHP を使用してデータを Vue.js に渡し、フロントエンドに実装する データのフィルタリングおよび並べ替え機能。まず、バックエンド PHP ファイルで、次のコードを使用してデータをクエリし、それをフロントエンドに返すことができます。

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

フロントエンドで Vue.js を使用すると、次のコードを取得できます。 Ajax リクエストを通じてデータをチャートにバインドします。 必要なデータ変数について:

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

フロントエンド コードでは、Vue インスタンスを作成し、data 属性に 2 つの変数を定義しました:students と filteredStudents。それぞれ元のデータとフィルタリングされたデータです。 ajax リクエストを送信して mount() でデータを取得し、そのデータを then() メソッドの対応する変数にバインドします。

次に、ページ上でフィルタリングと並べ替えを行うためのインタラクティブな要素を追加できます。たとえば、フィルター条件のドロップダウン リストに次のコードを追加できます。

<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>

sortData() メソッドでは、JavaScript の配列並べ替えメソッドを使用してデータを並べ替えることができます。たとえば、名前で昇順に並べ替えるコードは次のとおりです。

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

最後に、HTML で Vue データ バインディングを使用して、グラフ上にデータを表示します。

<table>
    <tr v-for="student in filteredStudents">
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
        <td>{{ student.grade }}</td>
    </tr>
</table>

上記のコードを通じてたとえば、PHP と Vue.js を使用して、グラフ上でデータのフィルター処理と並べ替え機能を実装できます。ユーザーはフィルター条件で特定のデータを選択し、並べ替え機能でデータを並べ替えることができるため、グラフ データの視覚化とユーザー エクスペリエンスが向上します。

以上がPHP と Vue.js を使用してグラフにデータのフィルタリングと並べ替え機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。