[SCRIPT] 구글차트 파이차트 (반원)

안녕하세요. 오늘은 구글차트를 활용하여 파이차트를 만들었습니다

기본적인 파이차트도 있지만 반원으로도 만들 수 있습니다.

간단하게 전체 데이터의 합계를 1개 더 조회해서 가져오는 것인데요

DB에서 데이터를 가져올때 각 데이터 합계, 각 데이터 총합계 이렇게 들고 오면 가능합니다.

예를 들어서 오렌지 20, 사과 30의 데이터가 있다면 안보일 데이터 50을 가져오는 것이지요

| 오렌지 20 / 사과 30 / 반원으로 사용될 데이터 50

 

---

 

예제

• 데이터 가져오는 쿼리  (가독성이 떨어지는 쿼리이지만 느리거나 문제가 되진 않습니다.)
• '무'라고 되어있는 데이터가 전체 데이터 합계입니다.(안보이는 반원)

select A.*
    from 
    (
    select '매우불만족' as grade, ifnull(round(avg(OVALL_STSFDG_SCOR),2),0) as average
    from GSN_26_PBLPIC_STSFDG
    where OVALL_STSFDG_SCOR <= 20

    union

    select '불만족' as grade, ifnull(round(avg(OVALL_STSFDG_SCOR),2),0) as average
    from GSN_26_PBLPIC_STSFDG
    where OVALL_STSFDG_SCOR > 20 and OVALL_STSFDG_SCOR <= 40

    union

    select '보통' as grade, ifnull(round(avg(OVALL_STSFDG_SCOR),2),0) as average
    from GSN_26_PBLPIC_STSFDG
    where OVALL_STSFDG_SCOR > 40 and OVALL_STSFDG_SCOR <= 60

    union

    select '만족' as grade, ifnull(round(avg(OVALL_STSFDG_SCOR),2),0) as average
    from GSN_26_PBLPIC_STSFDG
    where OVALL_STSFDG_SCOR > 60 and OVALL_STSFDG_SCOR <= 80

    union

    select '매우만족' as grade, ifnull(round(avg(OVALL_STSFDG_SCOR),2),0) as average
    from GSN_26_PBLPIC_STSFDG
    where OVALL_STSFDG_SCOR > 80 and OVALL_STSFDG_SCOR <= 100 

    union

    select '무' grade, sum(B.average)
    from(
    select '매우불만족' as grade, ifnull(round(avg(OVALL_STSFDG_SCOR),2),0) as average 
    from GSN_26_PBLPIC_STSFDG
    where OVALL_STSFDG_SCOR <= 20

    union
    select '불만족' as grade, ifnull(round(avg(OVALL_STSFDG_SCOR),2),0) as average 
    from GSN_26_PBLPIC_STSFDG
    where OVALL_STSFDG_SCOR > 2 and OVALL_STSFDG_SCOR <= 4

    union
    select '보통' as grade, ifnull(round(avg(OVALL_STSFDG_SCOR),2),0) as average 
    from GSN_26_PBLPIC_STSFDG
    where OVALL_STSFDG_SCOR > 4 and OVALL_STSFDG_SCOR <= 6

    union
    select '만족' as grade, ifnull(round(avg(OVALL_STSFDG_SCOR),2),0) as average 
    from GSN_26_PBLPIC_STSFDG
    where OVALL_STSFDG_SCOR > 6 and OVALL_STSFDG_SCOR <= 8

    union
    select '매우만족' as grade, ifnull(round(avg(OVALL_STSFDG_SCOR),2),0) as average 
    from GSN_26_PBLPIC_STSFDG
    where OVALL_STSFDG_SCOR > 8

    ) B

    ) A

 

• 파이차트 만들기 (DB에서 가져온 데이터 활용)

<div id="feelPie" class="chart_area" style="width: 100%; height: 600px;"></div>

<script>
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(feelPie);


function feelPie() {
	var data = google.visualization.arrayToDataTable([
        ['grade', '점수',],
		<c:forEach var="feelPie" items="${feelPie}">
			['${feelPie.grade}', ${feelPie.per}],
		</c:forEach>
      ]);


	var options = {
			pieHole: 0.5,
			textStyle:{fontSize: 20,italic: true},	
			fontSize: 22,	
			chartArea: {left: "0",
				        top: "5%",
				        height: "1000",
				        width: '100%',
						backgroundColor: {fill: '#464646',stroke:'black', strokeSize: 10},				
			},
			tooltip : {textStyle: {color: '#333', fontSize: 28}, showColorCode: true, text:'value'},
			legend: {position: 'none',textStyle: {color: 'blue', fontSize: 16} },
			slices: {0: {color: '#ff8484'}, 		
					1:{color: '#ffcb7f'}, 	
					2:{color: '#2ed68b'}, 		
					3:{color: '#01a7ff'}, 			// 안전
					4: {color: '#7060ff'}, 		// 매우안전
					5:{color: 'transparent'}},	// 반절단용
			pieStartAngle: 270,
			animation:{
				duration: 1000,
				easing: 'in'
			},
			pieSliceText: 'value'
			// pointer-events: 'none'
		};

			var chart = new google.visualization.PieChart(document.getElementById('feelPie'));
			chart.draw(data, options);
};

</script>

 

• 파이차트 만들기2 (하드코딩)

 

 

---

공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)