PHP 및 vue.js로 그룹화 및 분류 통계 차트 표시를 만드는 방법

PHP 및 vue.js로 그룹화 및 분류 통계 차트 표시를 만드는 방법

소개:
통계 차트는 데이터 시각화의 중요한 수단 중 하나이며, 이는 데이터를 시각적으로 표시하고 이해하는 데 도움이됩니다. 이 기사에서는 PHP와 Vue.js를 결합하여 그룹화 및 분류의 통계 차트 효과를 달성하는 방법에 대해 자세히 설명합니다. 데이터 처리에서 프론트 엔드 디스플레이에 이르기까지 코드 예제를 점차적으로 제공합니다.

1 단계 : 데이터 준비

먼저 프레젠테이션을 위해 몇 가지 기본 데이터를 준비해야합니다. 이 예에서는 판매 데이터를 예제로 가져 오며 데이터 구조는 다음과 같습니다.

$ data = [
    [ 'group'=> 'a', 'category'=> 'cat1', 'mold'=> 100],
    [ 'group'=> 'a', 'category'=> 'cat1', 'mold'=> 150],
    [ 'group'=> 'a', 'category'=> 'cat2', 'mold'=> 200],
    [ 'group'=> 'b', 'category'=> 'cat2', 'mold'=> 300],
    [ 'group'=> 'b', 'category'=> 'cat1', 'mold'=> 180],
    [ '그룹'=> 'c', 'category'=> 'cat1', 'mold'=> 120],
    [ '그룹'=> 'c', 'category'=> 'cat2', 'mold'=> 250]
];

2 단계 : 백엔드 처리 데이터

다음으로 PHP를 사용하여 프론트 엔드 차트 표시를위한 데이터를 처리해야합니다. PHP 코드 예는 다음과 같습니다.

$ groupedData = [];

foreach ($ data as $ row) {
    $ group = $ row [ 'Group'];
    $ 범주 = $ 행 [ '범주'];
    $ 금액 = $ 행 [ '금액'];

    if (! isset ($ groupedData [$ Group])) {
        $ groupedData [$ Group] = [];
    }
    if (! isset ($ 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>{{ 범주 }}</td>
                <td>{{ 양 }}</td>
            </tr>
        </table>
    </div>
</div>

vue.js 코드 예 :

새로운 vue ({
    el : '#app',
    데이터 : {
        GroupedData : []
    },
    마운트 () {
        axios.get ( '/api/data.php')
            . 그런데 (응답 => {
                this.groupedData = response.data;
            })
            .catch (error => {
                Console.log (오류);
            });
    }
});

위의 코드 예제를 통해 "그룹"및 "카테고리"에 따라 데이터 그룹화 및 분류 기능을 구현합니다. vue.js의 v-for 지시문을 통해 각 그룹을 반복하고 프론트 엔드에 데이터를 동적으로 표시 할 수 있습니다.

요약

이 기사에서는 PHP 및 Vue.js를 통해 그룹화 및 분류의 통계 차트 표시를 구현하는 방법을 자세히 설명합니다. 먼저 PHP를 통해 데이터를 처리 한 다음 vue.js를 통해 프론트 엔드 페이지에 데이터를 동적으로 표시합니다. 이 기사가 통계 차트 그룹화 및 분류의 효과를 달성하는 방법을 더 잘 이해하는 데 도움이되기를 바랍니다.