파이차트 글자 겹쳐보이는 버그 수정 (legend 오른쪽으로 이동)

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>
 

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>
 

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>
 

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>
 

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>