From b9c6a0da069ce1496039236476139f5d43e33f9a Mon Sep 17 00:00:00 2001
From: eastargh <eastarnv@naver.com>
Date: Thu, 16 Jul 2026 10:14:37 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8C=8C=EC=9D=B4=EC=B0=A8=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B8=80=EC=9E=90=20=EA=B2=B9=EC=B3=90=EB=B3=B4=EC=9D=B4?=
 =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95=20(legend?=
 =?UTF-8?q?=20=EC=98=A4=EB=A5=B8=EC=AA=BD=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jsp/onl/kjb/statistics/apiStatsDayMan.jsp | 42 +++++++-----------
 .../onl/kjb/statistics/apiStatsHourMan.jsp    | 42 +++++++-----------
 .../onl/kjb/statistics/apiStatsMinuteMan.jsp  | 44 ++++++++-----------
 .../onl/kjb/statistics/apiStatsMonthMan.jsp   | 42 +++++++-----------
 .../onl/kjb/statistics/apiStatsYearMan.jsp    | 42 +++++++-----------
 5 files changed, 86 insertions(+), 126 deletions(-)

diff --git a/WebContent/jsp/onl/kjb/statistics/apiStatsDayMan.jsp b/WebContent/jsp/onl/kjb/statistics/apiStatsDayMan.jsp
index 8804eb8..a654d34 100644
--- a/WebContent/jsp/onl/kjb/statistics/apiStatsDayMan.jsp
+++ b/WebContent/jsp/onl/kjb/statistics/apiStatsDayMan.jsp
@@ -66,22 +66,27 @@
 				},
 				tooltip: {
 					trigger: 'item',
-					formatter: '{b}: {c} ({d}%)'
+					formatter: function (params) {
+						return params.name + ': ' + params.value.toLocaleString() + ' (' + params.percent + '%)';
+					}
 				},
 				legend: {
-					orient: 'horizontal',
-					bottom: 10,
+					orient: 'vertical',
+					right: 30,
+					top: 'middle',
 					data: ['성공', 'Timeout', '시스템오류']
 				},
 				series: [{
 					name: '총건수',
 					type: 'pie',
-					radius: ['40%', '70%'],
-					center: ['50%', '50%'],
+					radius: ['38%', '65%'],
+					center: ['44%', '55%'],
 					avoidLabelOverlap: true,
 					label: {
 						show: true,
-						formatter: '{b}: {c}'
+						formatter: function (params) {
+							return params.name + ': ' + params.value.toLocaleString();
+						}
 					},
 					emphasis: {
 						label: {
@@ -98,18 +103,6 @@
 						{ value: 0, name: 'Timeout', itemStyle: { color: '#FAC858' } },
 						{ value: 0, name: '시스템오류', itemStyle: { color: '#EE6666' } }
 					]
-				}],
-				graphic: [{
-					type: 'text',
-					left: 'center',
-					top: 'center',
-					style: {
-						text: '0',
-						textAlign: 'center',
-						fill: '#333',
-						fontSize: 24,
-						fontWeight: 'bold'
-					}
 				}]
 			};
 
@@ -119,7 +112,7 @@
 
 			// 호출량 차트
 			var callOption = {
-				title: { text: '호출량 추이', left: 'center', textStyle: { fontSize: 14 } },
+				title: { text: '호출량 추이', left: 'center', top: 10, textStyle: { fontSize: 14 } },
 				tooltip: {
 					trigger: 'axis',
 					axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
@@ -191,13 +184,9 @@
 						{ value: totalTimeout, name: 'Timeout' },
 						{ value: totalSystemErr, name: '시스템오류' }
 					]
-				}],
-				graphic: [{
-					style: {
-						text: grandTotal.toLocaleString()
-					}
 				}]
 			});
+			$("#totalDonutCenterText").text(grandTotal.toLocaleString());
 
 
 			// 호출량 차트 업데이트
@@ -630,7 +619,10 @@
 		</table>
 		<!-- 도넛 차트 (상단 50%씩) -->
 		<div class="chart-container">
-			<div id="totalDonutChart" class="chart"></div>
+			<div class="chart" style="position:relative; padding:0;">
+				<div id="totalDonutChart" style="width:100%; height:100%;"></div>
+				<div id="totalDonutCenterText" style="position:absolute; left:44.5%; top:55%; transform:translate(-50%,-50%); font-size:24px; font-weight:bold; color:#333; pointer-events:none; z-index:10;">0</div>
+			</div>
 			<div id="callChart" class="chart"></div>
 		</div>
 
diff --git a/WebContent/jsp/onl/kjb/statistics/apiStatsHourMan.jsp b/WebContent/jsp/onl/kjb/statistics/apiStatsHourMan.jsp
index f1d315f..d44d175 100644
--- a/WebContent/jsp/onl/kjb/statistics/apiStatsHourMan.jsp
+++ b/WebContent/jsp/onl/kjb/statistics/apiStatsHourMan.jsp
@@ -67,22 +67,27 @@
 				},
 				tooltip: {
 					trigger: 'item',
-					formatter: '{b}: {c} ({d}%)'
+					formatter: function (params) {
+						return params.name + ': ' + params.value.toLocaleString() + ' (' + params.percent + '%)';
+					}
 				},
 				legend: {
-					orient: 'horizontal',
-					bottom: 10,
+					orient: 'vertical',
+					right: 30,		
+					top: 'middle',
 					data: ['성공', 'Timeout', '시스템오류']
 				},
 				series: [{
 					name: '총건수',
 					type: 'pie',
-					radius: ['40%', '70%'],
-					center: ['50%', '50%'],
+					radius: ['38%', '65%'],
+					center: ['44%', '55%'],
 					avoidLabelOverlap: true,
 					label: {
 						show: true,
-						formatter: '{b}: {c}'
+						formatter: function (params) {
+							return params.name + ': ' + params.value.toLocaleString();
+						}
 					},
 					emphasis: {
 						label: {
@@ -99,18 +104,6 @@
 						{ value: 0, name: 'Timeout', itemStyle: { color: '#FAC858' } },
 						{ value: 0, name: '시스템오류', itemStyle: { color: '#EE6666' } }
 					]
-				}],
-				graphic: [{
-					type: 'text',
-					left: 'center',
-					top: 'center',
-					style: {
-						text: '0',
-						textAlign: 'center',
-						fill: '#333',
-						fontSize: 24,
-						fontWeight: 'bold'
-					}
 				}]
 			};
 
@@ -120,7 +113,7 @@
 
 			// 호출량 차트
 			var callOption = {
-				title: { text: '호출량 추이', left: 'center', textStyle: { fontSize: 14 } },
+				title: { text: '호출량 추이', left: 'center', top: 10, textStyle: { fontSize: 14 } },
 				tooltip: {
 					trigger: 'axis',
 					axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
@@ -227,13 +220,9 @@
 						{ value: totalTimeout, name: 'Timeout' },
 						{ value: totalSystemErr, name: '시스템오류' }
 					]
-				}],
-				graphic: [{
-					style: {
-						text: grandTotal.toLocaleString()
-					}
 				}]
 			});
+			$("#totalDonutCenterText").text(grandTotal.toLocaleString());
 
 
 			// 호출량 차트 업데이트
@@ -610,7 +599,10 @@
 		</table>
 		<!-- 도넛 차트 (상단 50%씩) -->
 		<div class="chart-container">
-			<div id="totalDonutChart" class="chart"></div>
+			<div class="chart" style="position:relative; padding:0;">
+				<div id="totalDonutChart" style="width:100%; height:100%;"></div>
+				<div id="totalDonutCenterText" style="position:absolute; left:44.5%; top:55%; transform:translate(-50%,-50%); font-size:24px; font-weight:bold; color:#333; pointer-events:none; z-index:10;">0</div>
+			</div>
 			<div id="callChart" class="chart"></div>
 		</div>
 
diff --git a/WebContent/jsp/onl/kjb/statistics/apiStatsMinuteMan.jsp b/WebContent/jsp/onl/kjb/statistics/apiStatsMinuteMan.jsp
index b7ea7a2..1d2dcbc 100644
--- a/WebContent/jsp/onl/kjb/statistics/apiStatsMinuteMan.jsp
+++ b/WebContent/jsp/onl/kjb/statistics/apiStatsMinuteMan.jsp
@@ -59,22 +59,27 @@
 				},
 				tooltip: {
 					trigger: 'item',
-					formatter: '{b}: {c} ({d}%)'
+					formatter: function (params) {
+						return params.name + ': ' + params.value.toLocaleString() + ' (' + params.percent + '%)';
+					}
 				},
 				legend: {
-					orient: 'horizontal',
-					bottom: 10,
+					orient: 'vertical',
+					right: 30,
+					top: 'middle',
 					data: ['성공', 'Timeout', '시스템오류']
 				},
 				series: [{
 					name: '총건수',
 					type: 'pie',
-					radius: ['40%', '70%'],
-					center: ['50%', '50%'],
+					radius: ['38%', '65%'],
+					center: ['44%', '55%'],
 					avoidLabelOverlap: true,
 					label: {
 						show: true,
-						formatter: '{b}: {c}'
+						formatter: function (params) {
+							return params.name + ': ' + params.value.toLocaleString();
+						}
 					},
 					emphasis: {
 						label: {
@@ -91,18 +96,6 @@
 						{ value: 0, name: 'Timeout', itemStyle: { color: '#FAC858' } },
 						{ value: 0, name: '시스템오류', itemStyle: { color: '#EE6666' } }
 					]
-				}],
-				graphic: [{
-					type: 'text',
-					left: 'center',
-					top: 'center',
-					style: {
-						text: '0',
-						textAlign: 'center',
-						fill: '#333',
-						fontSize: 24,
-						fontWeight: 'bold'
-					}
 				}]
 			};
 
@@ -111,8 +104,8 @@
 
 
 			// 호출량 차트
-			var callOption = {
-				title: { text: '호출량 추이', left: 'center', textStyle: { fontSize: 14 } },
+			var callOption = {		
+				title: { text: '호출량 추이', left: 'center', top: 10, textStyle: { fontSize: 14 } },
 				tooltip: {
 					trigger: 'axis',
 					axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
@@ -189,13 +182,9 @@
 						{ value: totalTimeout, name: 'Timeout' },
 						{ value: totalSystemErr, name: '시스템오류' }
 					]
-				}],
-				graphic: [{
-					style: {
-						text: grandTotal.toLocaleString()
-					}
 				}]
 			});
+			$("#totalDonutCenterText").text(grandTotal.toLocaleString());
 
 
 			// 호출량 차트 업데이트
@@ -619,7 +608,10 @@
 		</table>
 		<!-- 도넛 차트 (상단 50%씩) -->
 		<div class="chart-container">
-			<div id="totalDonutChart" class="chart"></div>
+			<div class="chart" style="position:relative; padding:0;">
+				<div id="totalDonutChart" style="width:100%; height:100%;"></div>
+				<div id="totalDonutCenterText" style="position:absolute; left:44.5%; top:55%; transform:translate(-50%,-50%); font-size:24px; font-weight:bold; color:#333; pointer-events:none; z-index:10;">0</div>
+			</div>
 			<div id="callChart" class="chart"></div>
 		</div>
 
diff --git a/WebContent/jsp/onl/kjb/statistics/apiStatsMonthMan.jsp b/WebContent/jsp/onl/kjb/statistics/apiStatsMonthMan.jsp
index b7e292d..d1df015 100644
--- a/WebContent/jsp/onl/kjb/statistics/apiStatsMonthMan.jsp
+++ b/WebContent/jsp/onl/kjb/statistics/apiStatsMonthMan.jsp
@@ -66,22 +66,27 @@
 				},
 				tooltip: {
 					trigger: 'item',
-					formatter: '{b}: {c} ({d}%)'
+					formatter: function (params) {
+						return params.name + ': ' + params.value.toLocaleString() + ' (' + params.percent + '%)';
+					}
 				},
 				legend: {
-					orient: 'horizontal',
-					bottom: 10,
+					orient: 'vertical',
+					right: 30,
+					top: 'middle',
 					data: ['성공', 'Timeout', '시스템오류']
 				},
 				series: [{
 					name: '총건수',
 					type: 'pie',
-					radius: ['40%', '70%'],
-					center: ['50%', '50%'],
+					radius: ['38%', '65%'],
+					center: ['44%', '55%'],
 					avoidLabelOverlap: true,
 					label: {
 						show: true,
-						formatter: '{b}: {c}'
+						formatter: function (params) {
+							return params.name + ': ' + params.value.toLocaleString();
+						}
 					},
 					emphasis: {
 						label: {
@@ -98,18 +103,6 @@
 						{ value: 0, name: 'Timeout', itemStyle: { color: '#FAC858' } },
 						{ value: 0, name: '시스템오류', itemStyle: { color: '#EE6666' } }
 					]
-				}],
-				graphic: [{
-					type: 'text',
-					left: 'center',
-					top: 'center',
-					style: {
-						text: '0',
-						textAlign: 'center',
-						fill: '#333',
-						fontSize: 24,
-						fontWeight: 'bold'
-					}
 				}]
 			};
 
@@ -119,7 +112,7 @@
 
 			// 호출량 차트
 			var callOption = {
-				title: { text: '호출량 추이', left: 'center', textStyle: { fontSize: 14 } },
+				title: { text: '호출량 추이', left: 'center', top: 10, textStyle: { fontSize: 14 } },
 				tooltip: {
 					trigger: 'axis',
 					axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
@@ -189,13 +182,9 @@
 						{ value: totalTimeout, name: 'Timeout' },
 						{ value: totalSystemErr, name: '시스템오류' }
 					]
-				}],
-				graphic: [{
-					style: {
-						text: grandTotal.toLocaleString()
-					}
 				}]
 			});
+			$("#totalDonutCenterText").text(grandTotal.toLocaleString());
 
 			
 
@@ -623,7 +612,10 @@
 		</table>
 		<!-- 도넛 차트 (상단 50%씩) -->
 		<div class="chart-container">
-			<div id="totalDonutChart" class="chart"></div>
+			<div class="chart" style="position:relative; padding:0;">
+				<div id="totalDonutChart" style="width:100%; height:100%;"></div>
+				<div id="totalDonutCenterText" style="position:absolute; left:44.5%; top:55%; transform:translate(-50%,-50%); font-size:24px; font-weight:bold; color:#333; pointer-events:none; z-index:10;">0</div>
+			</div>
 			<div id="callChart" class="chart"></div>
 		</div>
 
diff --git a/WebContent/jsp/onl/kjb/statistics/apiStatsYearMan.jsp b/WebContent/jsp/onl/kjb/statistics/apiStatsYearMan.jsp
index 7bfbe52..0b5af6b 100644
--- a/WebContent/jsp/onl/kjb/statistics/apiStatsYearMan.jsp
+++ b/WebContent/jsp/onl/kjb/statistics/apiStatsYearMan.jsp
@@ -66,22 +66,27 @@
 				},
 				tooltip: {
 					trigger: 'item',
-					formatter: '{b}: {c} ({d}%)'
+					formatter: function (params) {
+						return params.name + ': ' + params.value.toLocaleString() + ' (' + params.percent + '%)';
+					}
 				},
 				legend: {
-					orient: 'horizontal',
-					bottom: 10,
+					orient: 'vertical',
+					right: 30,
+					top: 'middle',
 					data: ['성공', 'Timeout', '시스템오류']
 				},
 				series: [{
 					name: '총건수',
 					type: 'pie',
-					radius: ['40%', '70%'],
-					center: ['50%', '50%'],
+					radius: ['38%', '65%'],
+					center: ['44%', '55%'],
 					avoidLabelOverlap: true,
 					label: {
 						show: true,
-						formatter: '{b}: {c}'
+						formatter: function (params) {
+							return params.name + ': ' + params.value.toLocaleString();
+						}
 					},
 					emphasis: {
 						label: {
@@ -98,18 +103,6 @@
 						{ value: 0, name: 'Timeout', itemStyle: { color: '#FAC858' } },
 						{ value: 0, name: '시스템오류', itemStyle: { color: '#EE6666' } }
 					]
-				}],
-				graphic: [{
-					type: 'text',
-					left: 'center',
-					top: 'center',
-					style: {
-						text: '0',
-						textAlign: 'center',
-						fill: '#333',
-						fontSize: 24,
-						fontWeight: 'bold'
-					}
 				}]
 			};
 
@@ -119,7 +112,7 @@
 
 			// 호출량 차트
 			var callOption = {
-				title: { text: '호출량 추이', left: 'center', textStyle: { fontSize: 14 } },
+				title: { text: '호출량 추이', left: 'center', top: 10, textStyle: { fontSize: 14 } },
 				tooltip: {
 					trigger: 'axis',
 					axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
@@ -191,13 +184,9 @@
 						{ value: totalTimeout, name: 'Timeout' },
 						{ value: totalSystemErr, name: '시스템오류' }
 					]
-				}],
-				graphic: [{
-					style: {
-						text: grandTotal.toLocaleString()
-					}
 				}]
 			});
+			$("#totalDonutCenterText").text(grandTotal.toLocaleString());
 
 			
 
@@ -593,7 +582,10 @@
 		</table>
 		<!-- 도넛 차트 (상단 50%씩) -->
 		<div class="chart-container">
-			<div id="totalDonutChart" class="chart"></div>
+			<div class="chart" style="position:relative; padding:0;">
+				<div id="totalDonutChart" style="width:100%; height:100%;"></div>
+				<div id="totalDonutCenterText" style="position:absolute; left:44.5%; top:55%; transform:translate(-50%,-50%); font-size:24px; font-weight:bold; color:#333; pointer-events:none; z-index:10;">0</div>
+			</div>
 			<div id="callChart" class="chart"></div>
 		</div>