yjryu / pohang_tp star
김성원 김성원 2023-12-12
완료
@fc0054891f9bdd13ea66cd76afec8ae97157b2ea
 
fc00548
client/views/components/MultiLineChart.vue (added)
+++ client/views/components/MultiLineChart.vue
@@ -0,0 +1,199 @@
+<template>
+    <div class="chart-container" ref="chartdiv"></div>
+</template>
+  
+<script>
+import * as am5 from '@amcharts/amcharts5';
+import * as am5xy from '@amcharts/amcharts5/xy';
+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
+
+export default {
+    props: {
+        chartData: {
+            type: Array,
+            required: true,
+        },
+        keyMapping: {
+            type: Object,
+        },
+        xField: {
+            type: String,
+            default: null
+            // required: true,
+        },
+    },
+    data() {
+        return {
+            chart: null,
+        };
+    },
+    methods: {
+        createChart(data, keyMapping, xField) {
+            console.log(typeof(xField));
+          
+
+            let coulmns = Object.keys(data[0]);
+            for(let i = 0; i < coulmns.length ; i++){
+                if(coulmns[i] == xField){
+                    coulmns.splice(i,1);
+                }
+            }
+         
+
+            let chartWarp = this.$refs["chartdiv"]; // 차트 상위 div ref 매칭
+            chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
+            let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)
+            div.style.width = "100%"; // 차트를 담을 div의 넓이
+            div.style.height = "100%"; // 차트를 담을 div의 높이
+            chartWarp.appendChild(div); // 차트 상위 div 안에 차트 하위 div를 추가
+            let root = am5.Root.new(div); // 차트 하위 div에 차트(root) 담기
+            this.charts = root; // 차트 정보 전역에 담기
+
+            root._logo.dispose();
+
+            // Set themes
+            // https://www.amcharts.com/docs/v5/concepts/themes/
+            root.setThemes([
+                am5themes_Animated.new(root)
+            ]);
+
+
+            // Create chart
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/
+            let chart = root.container.children.push(am5xy.XYChart.new(root, {
+                panX: true,
+                panY: true,
+                wheelX: "panX",
+                wheelY: "zoomX",
+                layout: root.verticalLayout,
+                pinchZoomX: true
+            }));
+            
+
+           // Add cursor
+            // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+            var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
+            behavior: "none"
+            }));
+            cursor.lineY.set("visible", false);
+
+
+            let xRenderer = am5xy.AxisRendererX.new(root, {
+                minorGridEnabled: true
+            });
+            
+            xRenderer.grid.template.set("location", 0.5);
+            xRenderer.labels.template.setAll({
+                location: 0.5,
+                multiLocation: 0.5
+            });
+
+            let xAxis = chart.xAxes.push(
+                am5xy.CategoryAxis.new(root, {
+                    categoryField: xField,
+                    renderer: xRenderer,
+                    tooltip: am5.Tooltip.new(root, {})
+                })
+            );
+
+            xAxis.data.setAll(data);
+
+            let yAxis = chart.yAxes.push(
+                am5xy.ValueAxis.new(root, {
+                    maxPrecision: 0,
+                    renderer: am5xy.AxisRendererY.new(root, {
+                   // inversed: true
+                    })
+                })
+            );
+
+            for(let s = 0 ; s < coulmns.length; s++){
+                this.makeSeries(chart,xField, xAxis ,yAxis, root,data,coulmns[s],coulmns[s]);
+            }
+
+            chart.set("scrollbarX", am5.Scrollbar.new(root, {
+                orientation: "horizontal",
+                marginBottom: 20
+            }));
+
+            let legend = chart.children.push(
+                am5.Legend.new(root, {
+                    centerX: am5.p50,
+                    x: am5.p50
+                })
+            );
+            
+
+            // Make series change state when legend item is hovered
+            legend.itemContainers.template.states.create("hover", {});
+
+            legend.itemContainers.template.events.on("pointerover", function (e) {
+              e.target.dataItem.dataContext.hover();
+            });
+
+            legend.itemContainers.template.events.on("pointerout", function (e) {
+                e.target.dataItem.dataContext.unhover();
+            });
+
+            legend.data.setAll(chart.series.values);
+
+            // Make stuff animate on load
+            // https://www.amcharts.com/docs/v5/concepts/animations/
+            chart.appear(1000, 100);
+        },
+
+        makeSeries : function(chart,xField, xAxis ,yAxis ,root ,data ,  name, fieldName) {
+            let series = chart.series.push(am5xy.LineSeries.new(root, {
+                name: name,               
+                xAxis: xAxis,
+                yAxis: yAxis,
+                valueYField: fieldName,
+                categoryXField: xField,
+                tooltip: am5.Tooltip.new(root, {
+                    pointerOrientation: "horizontal",
+                    labelText: "[bold]{name}[/]\n{categoryX}: {valueY}"
+                })
+            }));
+
+            series.bullets.push(function () {
+                return am5.Bullet.new(root, {
+                sprite: am5.Circle.new(root, {
+                    radius: 5,
+                    fill: series.get("fill")
+                })
+                });
+            });
+
+            series.set("setStateOnChildren", true);
+            series.states.create("hover", {});
+
+            series.mainContainer.set("setStateOnChildren", true);
+            series.mainContainer.states.create("hover", {});
+
+          //  series.strokes.template.states.create("hover", {
+        //        strokeWidth: 4
+         //   });
+
+            series.data.setAll(data);
+            series.appear(1000);
+      }
+    },
+    watch: {
+        'chartData': function (newData) {
+            console.log('newData - ', newData)
+            this.createChart(newData,this.keyMapping,this.xField);
+        }
+    },
+    mounted() {
+        // this.chart = this.createChart(this.data, this.xField, this.yField, this.colors, this.unit);
+    },
+};
+</script>
+  
+<style scoped>
+.chart-container {
+    width: 100%;
+    height: 400px;
+}
+</style>
+  (No newline at end of file)
86adef4
fc00548
client/views/components/StackedColumnChart.vue
--- client/views/components/StackedColumnChart.vue
+++ client/views/components/StackedColumnChart.vue
@@ -47,16 +47,12 @@
 
 
             let coulmns = Object.keys(data[0]);
 
 
-
 
-
 
             for(let i = 0; i < coulmns.length ; i++){
 
                 if(coulmns[i] == xField){
 
                     coulmns.splice(i,1);
 
                 }
 
-               
             }
 
-            console.log('data',data)
 
-            console.log('coulmns',coulmns)
 
+          
 
 
             // Set themes
86adef4
fc00548
client/views/pages/Main/Main.vue
--- client/views/pages/Main/Main.vue
+++ client/views/pages/Main/Main.vue
@@ -21,7 +21,7 @@
 
                         <p>군집/월별 점검 횟수</p>                       
                     </div>
 
                 </div>
 
-                <!-- <VerticalBarChart :chartData="emptyTimeData" :xField="'time'" :yField="'mean'" :color="['#1c7ed6','#74c0fc','#1864ab']" /> -->
 
+                <MultiLineChart :chartData="emptyClusterData1"  :xField="'month'" />
 
             </div>
 
             <div class="content-box">
 
                 <div class="chart-title">
@@ -64,6 +64,8 @@
 
 import LineChart from '../../components/LineChart.vue';
 
 import DataChart1 from '../../components/DataChart1.vue';
 
 import StackedColumnChart from '../../components/StackedColumnChart.vue';
 
+import MultiLineChart from '../../components/MultiLineChart.vue';
 
+
 
 
 
 export default {
@@ -107,13 +109,28 @@
 
                 { Cluster_Labels:2.0,  mean:158.4532030077},
 
                 { Cluster_Labels:3.0,  mean:60.4299174302 },
 
             ],
 
+            emptyClusterData1: [],
 
+            clusterData1 :[
 
+                {  "month": 1,    "0.0": 158,    "1.0": 217,    "2.0": 36,    "3.0": 336},
 
+                {  "month": 2,    "0.0": 149,    "1.0": 211,    "2.0": 32,    "3.0": 357 },
 
+                {  "month": 3,    "0.0": 229,    "1.0": 239,    "2.0": 41,    "3.0": 373 },
 
+                { "month": 4,    "0.0": 194,    "1.0": 238,    "2.0": 36,    "3.0": 370},
 
+                {  "month": 5,    "0.0": 249,    "1.0": 227,    "2.0": 58,    "3.0": 382},
 
+                {  "month": 6,    "0.0": 224,    "1.0": 192,    "2.0": 68,    "3.0": 364 },
 
+                {   "month": 7,    "0.0": 263,    "1.0": 220,    "2.0": 68,    "3.0": 292 },
 
+                {   "month": 8,    "0.0": 233,    "1.0": 222,    "2.0": 42,    "3.0": 258},
 
+                {  "month": 9,    "0.0": 198,    "1.0": 219,    "2.0": 50,    "3.0": 211},
 
+                {  "month": 10,    "0.0": 228,    "1.0": 238,    "2.0": 53,    "3.0": 230 },
 
+                {   "month": 11,    "0.0": 238,    "1.0": 230,    "2.0": 42,    "3.0": 213},
 
+                {  "month": 12,    "0.0": 206,    "1.0": 219,    "2.0": 30,  "3.0": 235 }
 
+            ],
 
             emptyClusterData2: [],
 
             clusterData2 :[
 
                  {  "Cluster_Labels":0.0, "mean":91.0661736084 },
 
                  {  "Cluster_Labels":1.0, "mean":331.3113772455 },
 
                  { "Cluster_Labels":2.0, "mean":12.2679856115  },
 
                  {  "Cluster_Labels":3.0, "mean":123.3695111848 }
 
-            ],
 
+            ],       
             emptyClusterData3: [],
 
             clusterData3 :[
 
                 { "Cluster_Labels":0.0, "9":787.0, "B":41.0, "D":46.0, "F":1135.0, "L":320.0, "M":200.0 },
@@ -138,9 +155,11 @@
 
             this.emptyNetData = this.netData;
 
             this.emptyLineData = this.lineData;
 
             this.emptyClusterData = this.clusterData;
 
+            this.emptyClusterData1 = this.clusterData1;
 
             this.emptyClusterData2 = this.clusterData2;
 
             this.emptyClusterData3 = this.clusterData3;
 
             this.emptyClusterData4 = this.clusterData4;
 
+           
         }
 
     },
 
     watch: {
@@ -151,7 +170,8 @@
 
         'VerticalBarChart': VerticalBarChart,
 
         'LineChart': LineChart,
 
         'DataChart1': DataChart1,
 
-        'StackedColumnChart' : StackedColumnChart
 
+        'StackedColumnChart' : StackedColumnChart,
 
+        'MultiLineChart' : MultiLineChart
 
     },
 
     mounted() {
 
         this.dataSet();
Add a comment
List