jichoi / lms_front star
woals 08-20
240820 권민수 학부모 대시보드 문제 카테고리별 점수 시각화 적용
@ee4a222fc455c758c4fec01de68c2e4ca966cd42
2a38eb6
ee4a222
client/views/pages/parents/Bubblechart.vue
--- client/views/pages/parents/Bubblechart.vue
+++ client/views/pages/parents/Bubblechart.vue
@@ -1,6 +1,8 @@
 
+<!-- 이 차트 컴포넌트는 유기되었습니다. -->

+

 <template>

-    <div ref="Bubblechart" style="width: 500px; height: 500px;"></div>

-  </template>

+  <div ref="Bubblechart" style="width: 500px; height: 500px;"></div>

+</template>

   

   <script>

   import * as am5 from "@amcharts/amcharts5";
 
ee4a222
client/views/pages/parents/CategoryBarChart.vue (added)
+++ client/views/pages/parents/CategoryBarChart.vue
@@ -0,0 +1,124 @@
+<template>
+    <div ref="CategoryBarChart" style="width: 500px; height: 500px;"></div>
+  </template>
+  
+  <script>
+  import * as am5 from "@amcharts/amcharts5";
+  import * as am5xy from "@amcharts/amcharts5/xy";
+  import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+  import axios from "axios";
+  
+  export default {
+    name: "CategoryBarChart",
+  
+    data() {
+      return {
+        chartData: [],
+        currentStdId: "1"
+      };
+    },
+  
+    mounted() {
+      this.getCategoryScoreData();
+    },
+  
+    methods: {
+      // 카테고리별 점수 데이터 가져오기
+      getCategoryScoreData() {
+        const vm = this;
+        axios.post('/dashboard/categoryScoreData.json', {
+            std_id: vm.currentStdId
+        })
+        .then(response => {
+            vm.chartData = response.data.map(item => ({
+                ...item,
+                combinedCategory: `${item.categoryNm}\n(${item.categoryCls})`
+            }));
+            vm.createChart();
+        })
+        .catch(error => {
+            console.error('카테고리 점수 데이터를 가져오는 중 오류 발생:', error);
+        })
+      },
+  
+      createChart() {
+        // Initialize root
+        const root = am5.Root.new(this.$refs.CategoryBarChart);
+  
+        // Apply themes
+        root.setThemes([
+          am5themes_Animated.new(root)
+        ]);
+  
+        // Create chart
+        const chart = root.container.children.push(am5xy.XYChart.new(root, {
+          panX: false,
+          panY: false,
+          wheelX: "panX",
+          wheelY: "zoomX",
+          layout: root.verticalLayout
+        }));
+  
+        // Create axes
+        const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+          renderer: am5xy.AxisRendererY.new(root, {}),
+          min: 0
+        }));
+  
+        const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
+          categoryField: "combinedCategory",
+          renderer: am5xy.AxisRendererX.new(root, {}),
+          tooltip: am5.Tooltip.new(root, { themeTags: ["axis"] })
+        }));
+  
+        xAxis.get("renderer").labels.template.setAll({
+            textAlign: "center",
+            centerX: am5.p50
+        });
+
+        xAxis.data.setAll(this.chartData);
+  
+        // Create series
+        const series = chart.series.push(am5xy.ColumnSeries.new(root, {
+          name: "Category Scores",
+          xAxis: xAxis,
+          yAxis: yAxis,
+          valueYField: "totalScore",
+          categoryXField: "combinedCategory",
+          tooltip: am5.Tooltip.new(root, {
+            labelText: "{categoryX}: {valueY}"
+          })
+        }));
+  
+        // Set color manually for each bar (simplified for clarity)
+        series.columns.template.setAll({
+          fill: am5.color("#67b7dc"),
+          stroke: am5.color("#67b7dc"),
+          fillOpacity: 0.8, // Adjust opacity if needed
+          strokeWidth: 0,
+          cornerRadiusTL: 5,
+          cornerRadiusTR: 5
+        });
+  
+        // Assign data
+        series.data.setAll(this.chartData);
+  
+        // Add legend
+        chart.children.push(am5.Legend.new(root, {
+          centerX: am5.p50,
+          x: am5.p50,
+          marginTop: 15,
+          marginBottom: 15
+        }));
+  
+        // Play initial series animation
+        series.appear(1000, 100);
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  /* 스타일은 필요에 따라 추가 */
+  </style>
+  (파일 끝에 줄바꿈 문자 없음)
2a38eb6
ee4a222
client/views/pages/parents/Main_p.vue
--- client/views/pages/parents/Main_p.vue
+++ client/views/pages/parents/Main_p.vue
@@ -164,8 +164,8 @@
 
                             </div>
 
 
                             <div class="wrap">
 
-                                <p class="name">LC/RC 세부 점수</p>
 
-                                <div class="flex justify-center"><Bubblechart /></div>
 
+                                <p class="name">문제 카테고리별 세부 점수</p>
 
+                                <div class="flex justify-center"><CategoryBarChart /></div>
 
                             </div>
 
 
                         </div>
@@ -185,7 +185,8 @@
 
 import ProgressBar from '../../component/ProgressBar.vue';
 
 import StackedBarChart from './StackedBarChart.vue';
 
 import Barchart from './Barchart.vue';
 
-import Bubblechart from './Bubblechart.vue';
 
+// import Bubblechart from './Bubblechart.vue';
 
+import CategoryBarChart from './CategoryBarChart.vue';
 
 import Dounutchart from './Dounutchart.vue';
 
 import ColumnLineChart from './ColumnLineChart.vue';
 
 import axios from "axios";
@@ -257,7 +258,8 @@
 
         ProgressBar,
 
         StackedBarChart: StackedBarChart,
 
         Barchart: Barchart,
 
-        Bubblechart: Bubblechart,
 
+        // Bubblechart: Bubblechart,
 
+        CategoryBarChart,
 
         Dounutchart: Dounutchart,
 
         ColumnLineChart: ColumnLineChart,
Add a comment
List