본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Html canvas circle chart2

Html Canvas circle agenda, Html 캔버스 원형 시간표(circle schedule, 방학 시간표) 제작기 HTML5가 등장하면서 웹에서 별의별것(?)을 다 하니 클라이언트의 요구사항 수준이 점점 높아지고 있는 시대입니다. 특별한 기능을 제작하고 만드는 경우에는 수학적 사고가 많이 필요로 하는데.. 학창시절에 배웠던 수학을 떠올리기에는 머리가 이미 너무 굳어버린건 아닌지 모르겠습니다...;ㅁ; 이번에 제작한 기능은 원형 시간표 입니다. 원형 시간표는 초등학생(요즘은 배우나 모르겠습니다..) 때 방학숙제에서 자주 하던 원형 표 입니다. 동그라미 원 안에 자기가 해야될 일을 채우고 원 주변은 시간이 쓰여있는 모양 입니다. 해당 기능을 Html 에서 제작하려면 부채꼴 모양이 그려져야 하므로 캔버스(canvas)이외의 방법으로는 구현하기가 어렵습니다. 먼저 기능 구현을 위해서 어떠한 기능이 필요한지 기초 기능을 정리.. 2021. 2. 15.
Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 18 : 원 차트 1 이번시간부터 부채꼴 모양으로 이루어진 원형 차트를 만드려고한다. 원형 차트는 검색해보면 대략 아래 이미지처럼 생겼다. 사용자가 어떠한 데이터를 입력하면 그 데이터의 전체 합계에서 비율에 맞추어서 차트가 만들어지게 되는 것 이다. 그렇다면 예를들어 첫번째 데이터가 100, 두번째 데이터도 100인 값이 들어왔다고 하자. 두 데이터의 합은 200이며, 그 200중 100이 차지하는 비율은 100/200 = 0.5 이며, 또다른 100이 차지하는 비율은 100/200 = 0.5이다. 위 예로든 데이터가 들어오면 각각 절반씩 채워진 차트가 탄생을 해야 되는 것 이다. 이런식으로 데이터가 들어오면 아래 사진처럼 차트가 그려져야 할 것 이다. 이번 원형 차트의 핵심은 이러한 비율을 잘 고려하여 그리는 것이라 볼 수.. 2020. 2. 20.