방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 커스텀 차트3 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 18 : 원 차트 1 이번시간부터 부채꼴 모양으로 이루어진 원형 차트를 만드려고한다. 원형 차트는 검색해보면 대략 아래 이미지처럼 생겼다. 사용자가 어떠한 데이터를 입력하면 그 데이터의 전체 합계에서 비율에 맞추어서 차트가 만들어지게 되는 것 이다. 그렇다면 예를들어 첫번째 데이터가 100, 두번째 데이터도 100인 값이 들어왔다고 하자. 두 데이터의 합은 200이며, 그 200중 100이 차지하는 비율은 100/200 = 0.5 이며, 또다른 100이 차지하는 비율은 100/200 = 0.5이다. 위 예로든 데이터가 들어오면 각각 절반씩 채워진 차트가 탄생을 해야 되는 것 이다. 이런식으로 데이터가 들어오면 아래 사진처럼 차트가 그려져야 할 것 이다. 이번 원형 차트의 핵심은 이러한 비율을 잘 고려하여 그리는 것이라 볼 수.. 2020. 2. 20. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 15 : 바 차트 3 이번시간에는 차트에 이벤트를 부여하는 방법이다. 맨 처음에 설명하였듯이 캔버스는 1개의 객체로 이루어져 있기 때문에 이벤트를 부여하는 방법은 데이터를 통해서 직접 계산식으로 구현해야 된다고 했었다. 앞선시간에 이벤트 부여하는 방법 3가지를 해 보았었다. 1. 사각형에 이벤트 부여 https://lts0606.tistory.com/284 2. 원에 이벤트 부여 https://lts0606.tistory.com/285 3. 다각형에 이벤트 부여 https://lts0606.tistory.com/286 여기서는 Bar 차트이므로 1번 사각형에 이벤트를 부여하는 방법을 적용해 보도록 하겠다. 캔버스에서의 위치는 캔버스가 html로부터 띄어진 높이와, html 좌측에서부터 멀어진 거리를 빼 주어야 위치값이 나온다.. 2020. 2. 19. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 13 : 바 차트 1 드디어 대망의 캔버스를 통한 차트만들기시간 첫번째이다. 차트는 기본적인 BAR 형태의 차트를 만들어보도록 하겠다. 앞선 내용들을 어느정도 숙지하고나서 아래 내용을 살펴보도록 하자. 사용자가 차트를 그리고싶어하는 데이터는 x좌표, y좌표와 높이 넓이 등이 포함되어있는 데이터가 아니다. 오직 순수하게 값(value)만 존재하는 데이터를 가지고 차트가 나타나주기를 바란다. 그러면 차트를 구성하려면 무엇부터 하여야 할까? 먼저 좌표의 개념부터 정리하여보자. 사용자가 데이터를 입력하였다고하면 캔버스의 특성상 값이 크면 맨 위의 지점은 조금만 떨어저야하고, 값이 작으면 많이 내려가야한다. 사진을 살펴보자. 캔버스의 y좌표는 아래로 향할수록 값이 커진다. 그래프로 표현해야될 값이 커질수록 내가 그리려는 차트는 맨위 .. 2020. 2. 12. 이전 1 다음
