본문 바로가기

차트 만들기2

파이 차트(Pie Chart) 만들기 파이 차트(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 형태로 코드를 작성할 수 있다는 것입니.. 2013. 8. 8.
차트(Chart) 만들기 - 막대 그래프 차트(Chart) 만들기 차트(Chart)는 다양한 분야에서 사용되고 있고 특히 다수의 데이터를 간의 관계를 나타내는데 특별히 효과적이라서 실적이나 장래 성장 가능성 및 목표 매출등과 같은 것을 시각화하는데 효과적입니다. 이러한 차트를 만드는데 있어 HTML5 요소(Element) 중 Canvas 요소는 여러분들에게 다양한 형태의 차트(Chart)를 만들 수 있도록 합니다. 여기서는 Canvas를 이용하여 다양한 형태의 챠트 중에서 막대(bar), 파이(pie) 차트(chart) 만드는 방법에 대해서 알아봅니다. 막대 차트(bar chart) 만들기 먼저 막대(bar) 형태의 차트를 만들기 위해서는 이미 canvas 부분에서 다루었지만 다시 설명하면 기본적으로 직사각형(Rectangle)을 만드는 방법을.. 2013. 8. 8.