구글 차트에서 Pie Chart에서 3D Chart 출력을 쉽게 할 수 있어 간단히 살펴볼까 합니다. 구글 차트에서 3D Chart는 딱 한줄 옵션만 추가하면 되기 때문에 너무 간단해서 구글 차트를 처음 소개할 때 Pie Chart를 예제를 들었는데 이부분을 좀 정리 할 필요가 있어 보여서 post로 하나 만들었네요. 그러면 간단히 Pie Chart에 대해 살펴 봅시다.
참고에서 차트 기본 코딩에서 예제는 다음과 같습니다.
[소스]
<body>
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['data1', 10],
['data2', 20],
['data3', 30],
['data4', 40],
['data5', 50]
]);
var options = {'title':'TEST TITLE',
'width':400,
'height':300};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</body>
[결과]
여기서 차트에 그려지는 명령이 이전 시간에 이부분 이라고 했죠.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
복습으로 html의 chart_div라는 id를 가진 태그에 PieChart()를 그리는데 chart.draw()함수로 그려지게 됩니다.
위 코딩에서
chart.draw(data, {'title':'TEST TITLE',
'width':400,
'height':300});
이렇게 data를 PieChart 옵션값에 의해 그려지게 됩니다.
Dount Chart의 경우는 이 Pie Chart에서 옵션의 부분만 수정하면 만들 수 있느데 바로 다음과 같습니다.
chart.draw(data, {'title':'TEST TITLE',
'width':400,
'height':300,
pieHole: 0.3});
}
구글 차트에서는 pieHole로 Pie Chart의 내부 원의 크기를 지정 할 수 있습니다.
chart.draw(data, {'title':'TEST TITLE',
'width':400,
'height':300,
pieHole: 0.3,
legend: 'none',
pieSliceText: 'label',
pieStartAngle: 90,
slices: { 1: {offset: 0.2},
3: {offset: 0.3}
}
});
[결과]
위 결과는 처음 Pie Chart 예제와 비교해서 어떻게 그림이 바뀌었는데 추가 옵션들을 값들을 비교하면서 살펴 보세요.
3D Pie Chart은 무지 간단하게 옵션 하나로 출력이 됩니다.
chart.draw(data, {'title':'TEST TITLE',
'width':400,
'height':300,
is3D: true});
is3D 한줄만 쓰면 3D Pie Chart로 출력됩니다.
[결과]
3D pie Chart에서는 pieHole 옵션이 적용이 안되더군요. 그부분을 생략하고 종합 코딩을 하면 다음과 같습니다.
[종합소스]
<body>
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['data1', 10],
['data2', 20],
['data3', 30],
['data4', 40],
['data5', 50]
]);
var options = {'title':'TEST TITLE',
'width':400,
'height':300,
legend: 'none',
pieSliceText: 'label',
pieStartAngle: 90,
slices: { 1: {offset: 0.2},
3: {offset: 0.3}
},
is3D: true};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</body>
[결과]
차트 옵션을 지정에서 이외에 다른 것들도 있지만 기본적인 것만 나열했네요. 오늘 post는 3D Pie Chart를 올리는게 주 목적이였는데 딱 한줄만 올리기가 좀 그래서 나머지 추가로 정리한 부분들을 post에 올렸네요. 참고로 다른 Line, Bar 같은 Chart에서는 저 옵션이 적용은 되지 않네요. Pie에서는 정상적으로 3D Chart가 동작하니깐 Pie 차트에서 써먹으면 좋을 듯 싶네요.