안녕하세요 요즘 통계 부분 개발을 맡아서 하고 있고
차트 라이브러리는 구글 차트를 이용하여 개발하고 있습니다.
이 글에서는 중점적으로 다룰 내용은 제가 통계 부분을 개발하면서 알게 된 점,
느낀 점과 간단한 예제를 다뤄보겠습니다.
구글 차트에는 여러 가지 차트를 제공해 주고 있는데요.
여러 가지 차트 중에 파이 차트(Pie Chart)를 다뤄볼게요.
사실 사이트에 보면 바로 사용할 수 있도록
예제 코드가 많이 있으니 참고하면 좋을 것 같아요.
https://developers.google.com/chart
그럼 예제 코드를 살펴볼게요.
<html>
<head>
<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() {
/* 2차원 배열로 만들어서 데이터를 넣어도 됩니다. (아래 주석처리된부분) */
// var data = google.visualization.arrayToDataTable(data);
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
// 'titlt'뿐만 아니라 더 많은 option이 있습니다.
// 저는 여기서 엄청 고생을했습니다.
var options = {
title: 'My Daily Activities'
};
/*
차트가 그려질 요소에 id값을 정확하게 적어주세요
HTML에서 유일한 요소에 차트가 그려져야 되니깐 id로 지정하는게 좋아요
*/
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>https://jsfiddle.net/api/post/library/pure/
위 예제는 구글 차트 사이트에서 제공하는 예제입니다.
option에 들어갈 내용들은 나중에 정리해서 올리도록 하겠습니다.
위에 링크를 통해서 실행을 시키면 아래에 사진처럼 차트가 예쁘게 그려집니다.
나중에 설명하겠지만 차트에 보이는 모든 건 option에서 컨트롤할 수 있어요.
간단하게 오른쪽에 있는 범례를 왼쪽으로 보내려면 legend: 'right'를 추가해 주면 됩니다.
legend에 값은 'bottom', 'labeled', 'left', 'none', 'right', 'top'
| legend.position | bottom | 범례의 위치가 차트 아래쪽으로 배치됩니다. |
| labeled | 조각 데이터 값에 연결하는 선을 그립니다. | |
| left | 범례의 위치가 차트 왼쪽으로 배치됩니다. | |
| none | 범례가 보이지 않습니다. | |
| right | 범례의 위치가 차트 오른쪽에 배치됩니다. | |
| top | 범례의 위치가 차트 위쪽에 배치됩니다. |
정석으로 범례의 위치를 지정하면 legend: {position: 'right'} 이렇게 작성하면 되고
legend: {position: 'labeled'} 설명은 조금 생소할 수 있어요.
위에 사진처럼 각 조각에 연결되는 선이 그려지고, 이것도 css나 js로 충분히 제어가 가능합니다.
(역시 갓 Stack Overflow)
제가 구글 차트를 이용하여 개발하면서 느낀 점이 여기서 나옵니다.
구글 차트 옵션을 잘만 사용하면 원하는 차트를 쉽게 그릴 수 있겠다.
라는 생각을 하게 되었습니다.
* 구글 차트를 그릴 때 그려질 요소가 완전히 그려지고 그려야 예제에 보이는 예쁜 차트가 그려집니다.
(차트를 그릴 때 요소가 그려지지 않은 상태이면 한쪽이 찌그러진 파이를 볼 수 있습니다..)