방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com html canvas chart2 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 23 : 최종 정리 캔버스와 관련된 마지막 시간이다. 이번장에서는 내용을 조금 정리해 보려 한다. Html에서 제공하는 캔버스는 내부에 그림을 그리는 효과를 나타내는 엘리먼트이다. 그러한 캔버스는 그리는 것 이외의 다른 이벤트, 영역 등에 대한 효과를 제공하지 않는다. * 그리는 효과는 단순히 그림만 그리는 효과라는 뜻은 아닙니다. ^^; 그렇기 때문에 모든 이벤트 처리 방법에 대해서는 사용자가 직접 구현해야 한다. 물론, Path2D 라는 조금 손쉽게 이벤트를 처리하는 객체가 존재하지만, 구형 브라우저 및 익스플로러에서는 동작하지 않기 때문에 사용하기가 매우 아쉽다. 사용자들이 익스플로러를 안쓰면 되긴하는데..대한민국에서는 아직 그건 무리이기 때문이다. 앞선 시간까지 살펴본 원형 차트에 여러 계산식을 더해주면 아래 코드처.. 2020. 2. 24. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 17 : 바 차트 5 이번시간에는 툴팁 효과를 나타내는 기능을 만들어 보겠다. 툴팁은 사실 그리 어려운 기능이 아니다. 여태껏 만들어온 방법과 거의 비슷하게 만들면 된다. 툴팁을 만들 개념을 정리하여보자. 1. 툴팁은 div테그로 만든다. 2. 툴팁은 position이 absolute이며 마우스가 움직일 때 마다 따라다니게 한다. 3. 차트 영역에 들어오면 툴팁을 보이게하고, 차트영역에 벗어나면 툴팁을 가린다. 3가지 개념으로 툴팁에 대한 작업을 해 주면 된다. 먼저 툴팁테그를 만들어준다. 요렇게 해주면 툴팁 테그는 처음에는 보이지 않는 상태로 존재하지만 absolute 속성이 있기 때문에 어디든 자유로이 나타낼 수 있다. 다음으로 툴팁함수를 만들어주자. function toolTipMaker(text, pos_x, pos_.. 2020. 2. 20. 이전 1 다음
