방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 캔버스 차트4 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 17 : 바 차트 5 이번시간에는 툴팁 효과를 나타내는 기능을 만들어 보겠다. 툴팁은 사실 그리 어려운 기능이 아니다. 여태껏 만들어온 방법과 거의 비슷하게 만들면 된다. 툴팁을 만들 개념을 정리하여보자. 1. 툴팁은 div테그로 만든다. 2. 툴팁은 position이 absolute이며 마우스가 움직일 때 마다 따라다니게 한다. 3. 차트 영역에 들어오면 툴팁을 보이게하고, 차트영역에 벗어나면 툴팁을 가린다. 3가지 개념으로 툴팁에 대한 작업을 해 주면 된다. 먼저 툴팁테그를 만들어준다. 요렇게 해주면 툴팁 테그는 처음에는 보이지 않는 상태로 존재하지만 absolute 속성이 있기 때문에 어디든 자유로이 나타낼 수 있다. 다음으로 툴팁함수를 만들어주자. function toolTipMaker(text, pos_x, pos_.. 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 캔버스) 튜토리얼 (차트만들기!) - 14 : 바 차트 2 앞전시간에는 도형을 그리고, 애니메이션을 주는 부분까지하여 단순한 차트의 형태를 구성하여 보았다. 이번에는 차트를 깔끔하게 그리는 방법과, 입력된 데이터가 하단에 표시되는 방법에 대해서 알아보겠다. 캔버스 내부에 차트를 그릴때 strokeRect함수를 사용해서 계속해서 그렸다. 그러다보니 내부에 줄이 그어진 상태로 차트가 완성되어서 되게 보기 불편한 모양이 되었다. 이러한 현상을 좀 해결하려면 가장 간단한 방법인 "지우고, 다시그리고" 방법을 써 주면 된다. 애니메이션을 주는 방법이 "지우고, 다시그리고" 방법이 짧은 시간동안 지속되면 마치 움직이는 효과를 나타내는 것 이라고 했으므로 처음 그리는 방법에서의 코드를 간단하게 수정하면 깔끔한 모양의 차트가 나오게 된다. 앞 시간 코드의 setInterval.. 2020. 2. 13. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 13 : 바 차트 1 드디어 대망의 캔버스를 통한 차트만들기시간 첫번째이다. 차트는 기본적인 BAR 형태의 차트를 만들어보도록 하겠다. 앞선 내용들을 어느정도 숙지하고나서 아래 내용을 살펴보도록 하자. 사용자가 차트를 그리고싶어하는 데이터는 x좌표, y좌표와 높이 넓이 등이 포함되어있는 데이터가 아니다. 오직 순수하게 값(value)만 존재하는 데이터를 가지고 차트가 나타나주기를 바란다. 그러면 차트를 구성하려면 무엇부터 하여야 할까? 먼저 좌표의 개념부터 정리하여보자. 사용자가 데이터를 입력하였다고하면 캔버스의 특성상 값이 크면 맨 위의 지점은 조금만 떨어저야하고, 값이 작으면 많이 내려가야한다. 사진을 살펴보자. 캔버스의 y좌표는 아래로 향할수록 값이 커진다. 그래프로 표현해야될 값이 커질수록 내가 그리려는 차트는 맨위 .. 2020. 2. 12. 이전 1 다음
