PHPとvue.jsを使用したグループ化および分類統計チャート表示を作成する方法

PHPとvue.jsを使用したグループ化および分類統計チャート表示を作成する方法

導入：
統計チャートは、データの視覚化の重要な手段の1つであり、データを視覚的に表示および理解するのに役立ちます。この記事では、PHPとVue.jsを組み合わせて、グループ化と分類の統計的チャート効果を実現する方法を詳細に説明します。データ処理からフロントエンドディスプレイまでのコード例を徐々に提供します。

ステップ1：データを準備します

まず、プレゼンテーションのためにいくつかの基本的なデータを準備する必要があります。この例では、販売データを例に挙げます。データ構造は次のとおりです。

$ data = [
    ['group' => 'a'、 'category' => 'cat1'、 'lument' => 100]、
    ['group' => 'a'、 'category' => 'cat1'、 'lument' => 150]、
    ['group' => 'a'、 'category' => 'cat2'、 'lument' => 200]、
    ['group' => 'b'、 'category' => 'cat2'、 'lument' => 300]、
    ['group' => 'b'、 'category' => 'cat1'、 'lument' => 180]、
    ['group' => 'c'、 'category' => 'cat1'、 'on' => 120]、
    ['group' => 'c'、 'category' => 'cat2'、 'humber' => 250]
];

ステップ2：バックエンド処理データ

次に、PHPを使用して、フロントエンドチャートの表示のデータを処理する必要があります。これがPHPコードの例です。

$ groupedData = [];

foreach（$ data as $ row）{
    $ group = $ row ['group'];
    $ category = $ row ['category'];
    $ rument = $ row ['lument'];

    if（！sisset（$ groupeddata [$ group]））{
        $ groupeddata [$ group] = [];
    }
    if（！sisset（$ groupeddata [$ group] [$ category]））{
        $ groupedData [$ group] [$ category] ​​= 0;
    }

    $ groupedData [$ group] [$ category] ​​+= $額;
}

echo json_encode（$ groupeddata）;

ステップ3：フロントエンドディスプレイ

バックエンドデータの準備が整ったので、vue.jsを使用してこのデータを表示します。 HTMLとvue.jsのコード例は次のとおりです。

HTMLコードの例：

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

vue.jsコードの例：

新しいしいVue（{
    EL： '＃app'、
    データ： {
        GroupedData：[]
    }、
    mounted（）{
        axios.get（ '/api/data.php'）
            .then（response => {
                this.groupedData = respons.data;
            }）
            .catch（error => {
                console.log（error）;
            }）;
    }
}）;

上記のコードの例を介して、「グループ」と「カテゴリ」に従ってデータのグループ化と分類の関数を実装します。 Vue.jsのV-For指令を通じて、各グループをループして、フロントエンドでデータを動的に表示できます。

要約します

この記事では、PHPとVue.jsを介してグループ化と分類の統計チャート表示を実装する方法を詳細に説明します。まず、PHPを介してデータを処理し、Vue.jsを介してフロントエンドページにデータを動的に表示します。この記事が、統計チャートのグループ化と分類の有効性を実現する方法をよりよく理解するのに役立つことを願っています。