방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Javascript canvas chart2 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 23 : 최종 정리 캔버스와 관련된 마지막 시간이다. 이번장에서는 내용을 조금 정리해 보려 한다. Html에서 제공하는 캔버스는 내부에 그림을 그리는 효과를 나타내는 엘리먼트이다. 그러한 캔버스는 그리는 것 이외의 다른 이벤트, 영역 등에 대한 효과를 제공하지 않는다. * 그리는 효과는 단순히 그림만 그리는 효과라는 뜻은 아닙니다. ^^; 그렇기 때문에 모든 이벤트 처리 방법에 대해서는 사용자가 직접 구현해야 한다. 물론, Path2D 라는 조금 손쉽게 이벤트를 처리하는 객체가 존재하지만, 구형 브라우저 및 익스플로러에서는 동작하지 않기 때문에 사용하기가 매우 아쉽다. 사용자들이 익스플로러를 안쓰면 되긴하는데..대한민국에서는 아직 그건 무리이기 때문이다. 앞선 시간까지 살펴본 원형 차트에 여러 계산식을 더해주면 아래 코드처.. 2020. 2. 24. 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. 이전 1 다음
