파이 차트(Pie Chart) 만들기
canvas에 파이 차트를 그리기 위해서는 기본적으로 canvas 부분에서 설명했었던 arc() 메서드에 대해서 다시 한 번 생각해볼 필요가 있습니다.
arc(x, y, radius, startAngle, endAngle [, anticlockwise])
위에서 x, y는 원의 중심좌표를 radius는 반경을 나타내고 startAngle은 시작 각도를 나타내고 endAngle은 끝 각도를
명시하는데 사용합니다. 각도는 보통 0부터 2
사이값으로 설정하고
실제 코드에서는 자바스크립트의 Math 객체(Object)의 PI 속성을 이용하여 그 각을 표시하게 됩니다. 다시 말해서 45도의 경우
인데 이를 45도는 0.25*Math.PI 형태로 코드를 작성할 수 있다는 것입니다.
anticlockwise는 “시계반대 방향으로”의
뜻으로 원호 혹은 원을 그릴 때 시계 반대방향으로 그릴 것인지를 설정하는 입력 파라미터로 명시하지 않으면 기본적으로 false 값을 가지며 이는 시간 방향으로 원호, 원을 그리게 됨을
의미합니다.
2013년 3월 현재 전세계 웹브라우저 점유율을 “http://www.w3counter.com/globalstats.php”
의 다음과 같은 통계 데이터를 바탕으로 Pie 도표를 그려보도록 합니다.
|
브라우저 |
점유율(%) |
|
크롬(Chrome) |
30.30 |
|
인터넷 익스플로러(Internet Explorer) |
24.60 |
|
파이어폭스(Firefox) |
19.30 |
|
사파리(Safari) |
16.30 |
|
오페라(Opera) |
2.30 |
|
기타 |
7.20 |
Pie
Chart를 그리기에 앞서 브라우저 당 점유율을 기준으로 첫 번째의 경우는 0도에서 x도까지 형태로 호를 그리도록 하면 되므로 “2
x (브라우저 점유율/100)”의 형태로 각을 나타낼 수 있습니다. 그리고 두 번째부터는
“x도+(2
x (브라우저 점유율/100)” 형태로 적용하면 됩니다.
이제 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=ko">
<title> pie chart</title>
<style>
#chartcanvas {
margin-top: 0px;
margin-left: 20px;
margin-right: 0;
margin-bottom: 0px;
border: 1px solid red;
padding: 0;
}
</style>
<script
type="text/javascript">
window.onload = function() {
//pie chart 코드 작성 부분
}
</script>
</head>
<body>
<canvas id="chartcanvas"
width="500" height="400"></canvas>
</body>
</html>
위와 같이 작성한
후 “piehart.html”로 저장한 후 브라우저를 통해 보면
canvas 영역만 빨간색으로 표시되어 나타나게 됩니다. 이제 “//pie chart 코드 작성 부분” 다음 라인에 코드를 작성합니다.
var canvas =
document.getElementById("chartcanvas");
var context =
canvas.getContext("2d");
var sw = canvas.width;
var sh = canvas.height;
var PADDING=100;
//Browser별 데이터 입력 chrome, IE, Firefox,
Safari, Opera, etc 순
var data = [30.3, 24.6,19.3,16.3,
2.3, 7.2];
//Browser별 색상 lawngreen,
blue, deeppink, aquamarine3, magenta, gold
var colors = ["#7cfc00", "#0000ff",
"#ff1493", "#66CDAA", "#ff00ff",
"#FFD700"];
var center_X=sw/2; //원의 중심 x 좌표
var center_Y=sh/2; //원의 중심 y 좌표
// 두 계산값 중 작은 값은 값을 원의 반지름으로
설정
var radius = Math.min(sw-(PADDING*2), sh-(PADDING*2))
/ 2;
var angle = 0;
var total = 0;
for(var i in data) { total +=
data[i]; } //데이터(data)의 총합 계산
for (var i = 0; i < data.length;
i++) {
context.fillStyle = colors[i]; //생성되는 부분의 채울 색 설정
context.beginPath();
context.moveTo(center_X,
center_Y); //원의 중심으로 이동
context.arc(center_X, center_Y,
radius, angle, angle +(Math.PI*2*(data[i]/total)));
context.lineTo(center_X,center_Y);
context.fill();
angle +=
Math.PI*2*(data[i]/total);
}
위와 같이 코드를 추가, 저장한 후 Firefox를
이용하여 보면 다음과 같이 pie chart 형태로 나타냅니다.
Pie Chart에 타이틀, 브라우저 이름 및 점유율 나타내기
Pie Chart에 타이틀, 브라우저 이름 및 점유율을 나타내는 방법은 bar chart 그리기에서
사용한 방법에서 fillText() 메서드를 이용하여 비교적 쉽게 나타낼 수 있습니다.
lastPosition +=
Math.PI*2*(data[i]/total);
}
//title 나타내기
var strMessage = "Web Browser
Market Share March 2013";
context.textAlign="center";
ontext.fillStyle =
"black";
context.font = "14pt Century
Gothic";
context.fillText(strMessage,
sw/2,30);
//브라우저 이름 및 점유율 나타내기
AddBrowserText(context,"Chrome",
"(30.3%)", colors[0],280, 320);
AddBrowserText(context,"Internet
Explorer", "(24.6%)", colors[1],70, 320);
AddBrowserText(context,"Firefox",
"(19.3%)", colors[2],140, 70);
AddBrowserText(context,"Safari",
"(16.3%)", colors[3],260, 70);
AddBrowserText(context,"Opera",
"(2.3%)", colors[4],360, 130);
AddBrowserText(context,"etc",
"(7.2%)", colors[5],370, 170);
function AddBrowserText(context,
strBrowser, strRate, colors, text_xcoord, text_ycoord) {
context.textAlign="left";
context.fillStyle = colors;
context.font = "12pt Century
Gothic";
context.fillText(strBrowser,
text_xcoord, text_ycoord);
context.fillText(strRate, text_xcoord,
text_ycoord+20);
}
위와 같이 fillText() 메서드를 이용하여 특정 좌표에 타이틀, 브라우저명, 점유율을 나타내는 코드를 작성, 저장 후 Firefox 브라우저를 통해 보면 다음과 같이 조금은 그럴듯한 pie
chart가 그려져서 나타남을 확인할 수 있습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년
여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본으로 2012년 10월 31일 출판 계약 이루어졌으나 출판사에서 약속한 출판일에 출판이
이루어지지 않아서 여러 번 출판 의사를 물었고 2013년 4 월경
반드시 출간된다는 확답을 들은 후 추가 원고작업으로 작성한 것으로 출처가 명시된 이미지를 제외한 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나
펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로
학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 전체 공개된 HTML5, CSS3 and JavaScript 자료에 대한 목차 (137) | 2013.08.20 |
|---|---|
| 차트(Chart) 만들기 - 막대 그래프 (2) | 2013.08.08 |
| 칼라 이미지를 Grayscale 이미지로 나타내기 (0) | 2013.08.08 |
| Box Model을 이용한 게시판 형태 만들기 (0) | 2013.08.08 |
| 2.sessionStorage (0) | 2013.08.08 |
