한국어
한국어
소개:
통계 차트는 데이터 시각화의 중요한 수단 중 하나이며, 이는 데이터를 시각적으로 표시하고 이해하는 데 도움이됩니다. 이 기사에서는 PHP와 Vue.js를 결합하여 그룹화 및 분류의 통계 차트 효과를 달성하는 방법에 대해 자세히 설명합니다. 데이터 처리에서 프론트 엔드 디스플레이에 이르기까지 코드 예제를 점차적으로 제공합니다.
먼저 프레젠테이션을 위해 몇 가지 기본 데이터를 준비해야합니다. 이 예에서는 판매 데이터를 예제로 가져 오며 데이터 구조는 다음과 같습니다.
$ 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]
];
다음으로 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);
백엔드 데이터가 준비되었으므로 vue.js를 사용 하여이 데이터를 표시합니다. 다음은 html 및 vue.js의 코드 예입니다.
<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 ({
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를 통해 프론트 엔드 페이지에 데이터를 동적으로 표시합니다. 이 기사가 통계 차트 그룹화 및 분류의 효과를 달성하는 방법을 더 잘 이해하는 데 도움이되기를 바랍니다.
