방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Html 캔버스44 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 20 : 원 차트 3 저번시간에는 이벤트를 부여하는 첫번째 방법으로 반지름 이내에 마우스가 들어온 경우에 대해서 감지하는 방법까지 알아 보았다. 이번시간에는 각 그려진 부채꼴 영역별로 감지된 도(degree)를 통해서 범위내에 들어온 경우에 대해서 살펴보도록 하겠다. 앞 시간 마지막 부분에서 아크탄젠트(탄젠트의 역함수)를 통해 중심점부터 마우스가 클릭한 곳 까지의 라디안 값을 구한뒤에 도(degree) 값으로 변환하였다. 해당 값을 보면 값이 -180 ~ 180 사이의 값이 나오게 되므로 이를 사용하기 쉽게 하려면 +180을 더해주면 된다. 그러면 0~ 360 값이 나오게 되므로 해당 값을 가지고 부채꼴 영역에 들어왔는지 판별하면 된다. isInsideArc함수를 수정하여보자. function isInsideArc(x1, y.. 2020. 2. 24. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 19 : 원 차트 2 이번시간에는 원형 차트에 대한 이벤트에 대해서 살펴보도록 하겠다. 기존에 보았던 이벤트보다도 난이도가 조금 높다고 생각한다. 먼저 원형 이벤트에대해서 고려해야될 점이 2가지로 구분되어진다. 1. 원 반지름 내부에 들어왔는가? 2. 부채꼴 데이터가 이루고있는 각(degree) 범위에 존재하는가? 먼저 1번에 대한 해답은 예전시간에 피타고라스의 정리를 통해서 구하는 방법으로 해결하였었다. * 기억이 안나면 : https://lts0606.tistory.com/285 그러면 이제 2번에 대해서 해결방법을 찾아야한다. 아래사진을 보자. 사용자가 1번영역을 클릭하였다고하자. 피타고라스의 정리 계산을 통해서 우리는 원 내부에 마우스가 들어왔는지 여부를 판별 할 수 있다. 그런데..반지름까지는 판별했는데 1번인지 2.. 2020. 2. 21. 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 캔버스) 튜토리얼 (차트만들기!) - 17 : 바 차트 5 이번시간에는 툴팁 효과를 나타내는 기능을 만들어 보겠다. 툴팁은 사실 그리 어려운 기능이 아니다. 여태껏 만들어온 방법과 거의 비슷하게 만들면 된다. 툴팁을 만들 개념을 정리하여보자. 1. 툴팁은 div테그로 만든다. 2. 툴팁은 position이 absolute이며 마우스가 움직일 때 마다 따라다니게 한다. 3. 차트 영역에 들어오면 툴팁을 보이게하고, 차트영역에 벗어나면 툴팁을 가린다. 3가지 개념으로 툴팁에 대한 작업을 해 주면 된다. 먼저 툴팁테그를 만들어준다. 요렇게 해주면 툴팁 테그는 처음에는 보이지 않는 상태로 존재하지만 absolute 속성이 있기 때문에 어디든 자유로이 나타낼 수 있다. 다음으로 툴팁함수를 만들어주자. function toolTipMaker(text, pos_x, pos_.. 2020. 2. 20. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 16 : 바 차트 4 이번시간에는 부여한 이벤트에 색상을 바꾸는 기능을 추가해 보겠다. mosemove에서 해당 영역안에 마우스가 올라오면 색이 변해야되고, 마우스가 out되면 색이 원래대로 되돌어 가야한다. 그렇다면 이러한 개념을 글로 풀어보면, 1. 마우스가 차트의 bar 내부에 있으면 색이 변해야한다. 2. 마우스가 차트bar의 외부로 나가면 색이 기존으로 돌아와야한다. 2가지 개념으로 정리가 된다. 다시그리기 개념을 적용하면 위 2가지 조건을 만족시킬 수 있다. 이를 함수로 표현하여보자. function hoverDrawing(hoverIdx){ ctx.clearRect(0,0,width, height); //초기화 value.forEach( (data, idx) => { ctx.save(); //정보저장 if(idx.. 2020. 2. 19. 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 2 3 4 5 6 7 8 다음
