차트(Chart) 만들기
차트(Chart)는 다양한 분야에서 사용되고 있고 특히 다수의 데이터를 간의 관계를 나타내는데 특별히 효과적이라서
실적이나 장래 성장 가능성 및 목표 매출등과 같은 것을 시각화하는데 효과적입니다.
이러한 차트를 만드는데 있어 HTML5 요소(Element)
중 Canvas 요소는 여러분들에게 다양한 형태의 차트(Chart)를
만들 수 있도록 합니다. 여기서는 Canvas를 이용하여 다양한 형태의 챠트 중에서 막대(bar), 파이(pie) 차트(chart) 만드는 방법에 대해서 알아봅니다.
막대 차트(bar chart) 만들기
먼저 막대(bar) 형태의 차트를 만들기 위해서는
이미 canvas 부분에서 다루었지만 다시 설명하면 기본적으로 직사각형(Rectangle)을 만드는 방법을 알아야 하고 이는 다음과 같은 형식을 이용해서 만들 수 있습니다.
fillRect(x, y, w, h)
위에서 각각 x, y 좌표를, w는 너비(width),
h는 높이(height)를 나타내며 fillStyle 속성을
이용하여 fillRect() 함수는
내부를 칠하게 됩니다.
이를 바탕으로 기본적인 예제를 하나 해볼까요? 메모장을 열어서 다음과 같이 작성합니다.
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=ko">
<title>chart</title>
<style>
#chartcanvas {
margin-top: 0px;
margin-left: 20px;
margin-right: 0;
margin-bottom: 0px;
border: 1px solid red;
padding: 0;
}
</style>
</script>
</head>
<body>
<canvas id="chartcanvas"
width="550" height="400"></canvas>
</body>
</html>
위와 같이 chartcanvas 라는 이름의 id 속성값을 갖는 canvas 요소에 외부여백(margin) 및 내부 여백(padding)을 설정한 후 “sellbarchart.html”로
저장합니다. 그리고 저장한 후 브라우저로 연결하여 보면 단지 빨간선으로 canvas 영역을 나타내게 됩니다.
실제로 막대 그래프 형태로 나타내기 위해서는 기본 데이터가 필요한데 다음과 같이 스마트폰 대리점의
2012년 하반기 월별 판매대수를 이용하도록 합니다.
|
7월 |
8월 |
9월 |
10월 |
11월 |
12월 |
|
95 |
73 |
85 |
45 |
72 |
32 |
이를 배열의
형태로 나타내면 “var sell_count=[95, 73, 85, 45, 72, 32];“가 됩니다. 이제 <script>…</script> 블록
내부에 window.onload 이벤트에 다음과 같이 코드를 작성합니다.
<script
type=”text/javascript”>
window.onload=function() {
var canvas =
document.getElementById("chartcanvas");
var context =
canvas.getContext("2d");
var sw = canvas.width;
var sh = canvas.height;
var sell_count = [95, 73, 85, 45, 72,
32];
var barwidth=60;
var barheight;
var xcoord=40;
var base=90;
for(var
i=0;i<sell_count.length;i++)
{
barheight=sell_count[i];
DrawBarchart(context,
"blue", xcoord, (sh-barheight)-base, barwidth, barheight);
xcoord +=barwidth+10;
}
//직사각형(Rectangle)을 그리는 함수
function DrawBarchart(context,
fillstyleColor, xcoord, ycoord, width, height) {
context.fillStyle = fillstyleColor;
context.fillRect(xcoord,ycoord,width,height);
}
}
</script>
위와 같이 작성한 후 저장 후 보면 다음과 같이 그럴듯한 2012년 하반기 월별 판매대수를 나타내는 막대 그래프 형태로 나타납니다.
막대 차트(bar Chart)에 타이틀, 월 나타내기
타이틀을 나타내기 위해서는 canvas 부분에서도
다루었지만 다음과 같은 fillText() 메서드를 이용하여 타이틀 및 해당 월을 나타낼 수 있습니다.
fillText(text, x, y)
위에서 text는 타이틀, 해당 월 같은 텍스트를 나타내고 x, y는 각각 좌표값을 나타냅니다.
이제 “//직사각형(Rectangle)을 그리는
함수” 부분 밑에 다음과 같은 코드들을 작성합니다.
//타이틀 나타내기
및 그림자 효과 주기
var strMessage = "2012년 하반기
휴대폰 판매량 보고서";
context.textAlign="center";
context.fillStyle =
"black";
context.shadowColor =
"rgba(0,0,0,0.5)";
context.shadowOffsetX = 1;
context.shadowOffsetY = 1;
context.shadowBlur = 3;
context.font = "16pt Century
Gothic";
context.fillText(strMessage, sw/2,
60);
//x, y 좌표 라인 표시하기
var LINE_PADDING=30;
context.moveTo(LINE_PADDING,
LINE_PADDING);
context.lineTo(LINE_PADDING,
sh-LINE_PADDING*3);
context.lineTo(sw-LINE_PADDING,
sh-LINE_PADDING*3);
var stepSize=10; //y 좌표의 판매 대수를
위한 단위 표시
context.font = "12pt Century
Gothic";
for(var i=0; i<18; i++){
context.moveTo(LINE_PADDING, LINE_PADDING+i*stepSize);
if(i==0) {
context.lineTo(LINE_PADDING
* 0.5, LINE_PADDING + i * stepSize);
context.fillText(180-(i*10),
LINE_PADDING * 0.5, LINE_PADDING + i * stepSize + 8);
}
else if(i==8){
context.lineTo(LINE_PADDING * 0.5,
LINE_PADDING + i *stepSize);
context.fillText(180-(i*10),
LINE_PADDING * 0.5, LINE_PADDING + i * stepSize + 8);
}
else if(i==13){
context.lineTo(LINE_PADDING * 0.5,
LINE_PADDING + i *stepSize);
context.fillText(180-(i*10),
LINE_PADDING * 0.5, LINE_PADDING + i * stepSize + 8);
}
}
context.stroke();
//해당 월 나타내기
var text_xcoord=70;
var sell_month = ["7월", "8월", "9월", "10월", "11월", "12월"];
for(var i=0;i<sell_month.length;i++)
{
AddMonthText(context,sell_month[i],
text_xcoord, (sh-barheight)-(base/3));
text_xcoord +=barwidth+10;
}
function AddMonthText(context,
strMonth, text_xcoord, text_ycoord) {
context.textAlign="center";
context.fillStyle = "red";
context.font = "12pt Century
Gothic";
context.fillText(strMonth, text_xcoord,
text_ycoord);
}
이와 같이 타이틀, 해당 월에 대해 나타내는 코드를 작성하고 저장한 후 보면 다음과 같이 나타납니다.
지금까지 막대 차트(bar chart)를 만드는 방법에 대해서 가장 기본적인 것부터 조금 타이틀, 해당 월 등을 나타내는 형태로 만들어보았습니다. 이렇게 만들어진 javascript 코드들은 외부 파일 형태로 만들어 사용할 경우에는 <script> … </script> 안에 모든 코드를 메모장을 열어서 복사한 후 “sellbarchart.js” 형태로 저장한 후 원래의 html 파일인 “sellbarchart.html”에서 <script> 부분을 다음과 같이 바꿔주면 됩니다.
<script type=”text/javascript” src=”sellbarchart.js”></script>
이상으로 canvas 내에 막대(bar) 형태의 차트를 만드는 방법에 대해서
알아보았습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년
여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본으로 2012년 10월 31일 출판 계약 이루어졌으나 출판사에서 약속한 출판일에 출판이
이루어지지 않아서 여러 번 출판 의사를 물었고 2013년 4 월경
반드시 출간된다는 확답을 들은 후 추가 원고작업으로 작성한 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나
펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로
학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 전체 공개된 HTML5, CSS3 and JavaScript 자료에 대한 목차 (137) | 2013.08.20 |
|---|---|
| 파이 차트(Pie Chart) 만들기 (11) | 2013.08.08 |
| 칼라 이미지를 Grayscale 이미지로 나타내기 (0) | 2013.08.08 |
| Box Model을 이용한 게시판 형태 만들기 (0) | 2013.08.08 |
| 2.sessionStorage (0) | 2013.08.08 |
