앞에서 원호를 그려 봤고 text를 입력해 봤습니다.
이를 활용하여 gauge chart를 쉽게 구현 해 볼 수 있습니다.
아래와 같은 gauge chart 를 구현 해 보겠습니다.
앞의 원호를 잘 이해 하셨다면 별다른 어려움 없이 이해 하셨을 겁니다.
설명하자면 너무 길어지니 소스를 보시면 이해가 가실꺼라 생각합니다.
setInterva()l메서드와 clearInterval()메서드를 사용해 에니메이션을 구현했습니다.
gauge chart도 만들 수 있으니
line을 활용하여 bar chart도 충분히 만들 수 있을것이라 생각합니다.
'canvas' 카테고리의 다른 글
[canvas] text 입력하기 (0) | 2013.07.31 |
---|---|
[canvas] arc 원호 그리기 (0) | 2013.07.30 |
[canvas] line color (0) | 2013.07.30 |
[canvas] line width (0) | 2013.07.30 |
[canvas] line 그리기 (0) | 2013.07.30 |