Index: arms/html/analysisScope/content-container.html
===================================================================
diff -u -re7f7db06beb2051772c24432b44ff81fb74c7b05 -rdff1566fe129df54642a59433f1a91c97bca2a09
--- arms/html/analysisScope/content-container.html	(.../content-container.html)	(revision e7f7db06beb2051772c24432b44ff81fb74c7b05)
+++ arms/html/analysisScope/content-container.html	(.../content-container.html)	(revision dff1566fe129df54642a59433f1a91c97bca2a09)
@@ -704,14 +704,12 @@
 									class="gradient_middle_border"
 									style="width: 100%; margin-top: 8px"></div>
 								<blockquote class="font12">
-									제품
-									<sup>서비스</sup>
-									에 몇개의 버전이 있는지, 버전 하위로 몇개의 요구사항이 있는지
+									제품<sup>서비스</sup>의 선택한 버전 별 요구사항 수
 								</blockquote>
 								<div
 									class="body"
 									id="reqPerVersionRoseChart"
-									style="min-height: 380px"></div>
+									style="min-height: 360px"></div>
 							</div>
 						</section>
 					</div>
Index: arms/js/analysis/resource/chart/RadialPolarBarChart.js
===================================================================
diff -u -r845713c04c7f52f7f6ef56aa6c2756a15585d851 -rdff1566fe129df54642a59433f1a91c97bca2a09
--- arms/js/analysis/resource/chart/RadialPolarBarChart.js	(.../RadialPolarBarChart.js)	(revision 845713c04c7f52f7f6ef56aa6c2756a15585d851)
+++ arms/js/analysis/resource/chart/RadialPolarBarChart.js	(.../RadialPolarBarChart.js)	(revision dff1566fe129df54642a59433f1a91c97bca2a09)
@@ -72,22 +72,64 @@
     var myChart = echarts.init(chartDom);
     var option;
 
+    var defaultColorSet = [
+        "rgba(227,26,27,0.66)",
+        "rgba(55,125,184,0.62)",
+        "rgba(77,175,74,0.65)",
+        "rgba(255,127,0,0.7)",
+        "rgba(255,255,51,0.71)",
+        "rgba(151,78,163,0.73)",
+        "rgba(166,86,40,0.7)"
+    ];
+
+    function calculateTotal(dataArr) {
+        const total = dataArr.reduce((acc, curr) => acc + curr.value, 0);
+        return total;
+    }
+    const totalValue = calculateTotal(dataArr);
+    console.log ("totalValue => " + totalValue);
+    var angleAxisArr = [], seriesDataArr=[];
+    if(dataArr.length > 0) {
+        dataArr.forEach((element, idx) => {
+           angleAxisArr.push(element["name"]);
+           seriesDataArr.push({value: element["value"], itemStyle: { color: colorArr ? colorArr[idx] : defaultColorSet[idx] }});
+        });
+    }
+
     option = {
-        title: [
-            {
-                text: 'Radial Polar Bar Label Position (middle)'
-            }
-        ],
         polar: {
-            radius: [30, '80%']
+            radius: ["25%", '55%'],
+            center: ['50%', '50%']
         },
         radiusAxis: {
-            max: 4
+            max: (totalValue === 0 ? 5 : totalValue),
+            splitNumber: 5,
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: "gray" ,
+                    width: 0.5,
+                    type: "dashed"
+                }
+            },
+            axisLabel: {
+                textStyle: {
+                    color: 'white', // 원하는 색상으로 변경
+                    fontSize: 10, // 폰트 크기 조정
+                }
+            }
         },
         angleAxis: {
             type: 'category',
-            data: ['a', 'b', 'c', 'd'],
-            startAngle: 90
+            data: angleAxisArr,//['BaseVersion', '1.0.1', '1.0.0'],
+            startAngle: 90,
+            axisLabel: {
+                textStyle: {
+                    color: 'white', // 원하는 색상으로 변경
+                    fontSize: 12, // 폰트 크기 조정
+                    fontWeight: "bold"
+                }
+            }
         },
         graphic: [
             {
@@ -97,41 +139,96 @@
                 z: 100,
                 style: {
                     text: [
-                        'Total',
-                        '100' // 여기에 값들의 총 합을 계산하여 넣어주세요.
+                        '{a|Total}',
+                        '{a|  ' + totalValue + '}'
                     ].join('\n'),
                     rich: {
                         a: {
-                            fontSize: 15,
+                            fontSize: 14,
                             fontWeight: 'bold',
-                            lineHeight: 30,
+                            lineHeight: 20,
                             fontFamily: 'Arial',
-                            fill: 'red'
+                            fill: 'white'
                         }
                     }
                 }
             }
         ],
         series: {
             type: 'bar',
-            data: [
-                { value: 2, itemStyle: { color: '#ff0000' } }, // 각 angle에 맞는 색상으로 수정
-                { value: 1.2, itemStyle: { color: '#00ff00' } },
-                { value: 2.4, itemStyle: { color: '#0000ff' } },
-                { value: 3.6, itemStyle: { color: '#ffff00' } }
-            ],
+            data: seriesDataArr,
             coordinateSystem: 'polar',
-            label: {
-                show: true,
-                position: 'middle',
-                formatter: '{b}: {c}'
+            // label: {
+            //     show: true,
+            //     position: 'inside',
+            //     formatter: function (params) {
+            //         if(params.value <= 10) {
+            //             return params.name + '\n' + '(' +params.value+')11';
+            //         } else {
+            //             return params.name + '\n' + '(' +params.value+')';
+            //         }
+            //     }
+            // },
+            barWidth: "100%",
+            itemStyle: {
+                borderColor: "white",
+                borderWidth: 1,
+                barBorderRadius: 3
             }
         },
         animation: false
-    };
+    }
 
-    option && myChart.setOption(option);
-    // 리사이즈 기능
+    function replaceNaN(value) {
+        if (isNaN(value)) {
+            return " - ";
+        } else {
+            return value;
+        }
+    }
+
+    function drawChartWithFooter(dataArr,total) {
+        const existingChartFooter = document.querySelector('.chart-footer');
+
+        if (existingChartFooter) {
+            existingChartFooter.remove();
+        }
+
+        const chartFooter = document.createElement("div");
+        chartFooter.classList.add("chart-footer");
+
+        dataArr.forEach((data,index) => {
+            const item = document.createElement("div");
+            const portion =replaceNaN(+(data.value*100/ +total).toFixed(0));
+            item.classList.add("footer-item");
+            item.style.borderColor = colorArr[index];
+            item.innerHTML = `<div class="item-name">${data.name}</div> <div class="item-value">${data.value} (${portion}%)</div>`;
+            chartFooter.appendChild(item);
+        });
+
+        chartDom.appendChild(chartFooter);
+
+        const footerItems = document.querySelectorAll('.footer-item');
+        const itemCount = footerItems.length;
+
+        const remainder = itemCount % 3;
+        const quotient = Math.floor(itemCount / 3);
+
+        footerItems.forEach((item, index) => {
+            if (remainder === 1 && Math.floor(index / 3) === quotient) {
+                item.style.width = '100%';
+            } else if (remainder === 2 && Math.floor(index / 3) >= quotient) {
+                item.style.width = '50%';
+            } else {
+                item.style.width = '33.33%';
+            }
+        });
+    }
+
+    drawChartWithFooter(dataArr,totalValue);
+
+    option && myChart.setOption(option, true);
+
     window.addEventListener('resize', function () {
         myChart.resize();
     });