방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Javascript custom chart2 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 21 : 원 차트 4 저번시간까지 이벤트를 부여하는 방법에 대해서 살펴 보았다. 이번시간에는 부채꼴 내부에 텍스트를 넣어보도록 하겠다. 앞전 시간에 알게된 사실은 아래 내용이다. 1. 원의 반지름 2. 원의 중심점 3. 점과 점사이의 각(degree) 구하는 방법 4. 이벤트 영역의 시작각(degree) ~ 종료각(degree) 범위 배열 여기에 수학적 방법(?)을 동원하면 텍스트가 들어갈 위치를 만들어낼 수 있다. 아래 고등학교(?) 시절 배웠던 사인과 코사인을 보도록 하자. 위 내용을 토대로 텍스트가 들어갈 영역을 만들어 낼 수 있다. 이벤트가 담긴 event_array 영역에서의 시작각 ~ 종료각 차이를 구한뒤에 절반으로 나누게 되면 텍스트가 해당 영역의 가운데 들어가게 될 것 이다. 말이 어려우므로 아래 코드를 살펴보.. 2020. 2. 24. 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. 이전 1 다음
