Chart js
특징은 위의 그림으로 대체 할 수 있을 듯 하다.
오픈 소스이고, 기본으로 제공하는 차트 종류가 8가지 Canvas를 이용해서 차트를 그리고, 반응형을 지원한다.
amchart
amchart는 기본적으로 유료이며, 기본으로 제공하는 차트 종류가 기본적인 차트 + 주식 처럼 보이는 차트 + 지도에 관련된 차트(?) 까지 하면, 기본 제공 하는 종류가 20개 내외 이려나, 일일이 세기에는 양이 좀 많아 보인다. 렌더링은 svg를 통하여 그려지고, 당연 반응형도 지원이 된다.
그러면, 이 둘중에 어떤것이 내 프로젝트에 적합 하냐는 것이 문제이다.
일단, 주식 처럼 보이는 차트나 지도에 관련된 차트(?)가 필요하면, amchart를 선택해야 되는 것은 맞다. 그건 당연한 것이니 빼고 얘기 해보자!
여러 종류의 차트가 필요하다면, 일단은 amchart를 염두해 두는 것이 좋다. 돈 낸 만큼은 하는 듯 하다. 하지만, 기본적인 막대 그래프, 도넛 차트 등, 아주 기본적인 차트들인데, Chart js도 amchart도 그러한 차트가 없을 때가 문제가 된다.
그렇다면, 조금이라도 커스텀이 용이한 것을 찾는 것이 좋을 것이다.
일단 amchart에서 custom이라고 검색 하였을 때, 검색 결과가 61가지가 나온다. 차트의 종류도 많고, 각 차트마다 들어가는 속성이 매우 많기 때문에, 웬만한 내용들은 속성 값을 어떻게 주느냐에 따라서 변경이 가능 하게 된다.
커스텀의 예를 들면, 기본적으로 도넛 파이의 형태를 띄면서, 화살표로 목표를 표시해주는 차트가 필요하다고 생각 해보자.
모양이 살짝 다르긴 하지만, 완벽하게 똑같이 구현 할 수도 있다. amchart로 만든 그래프의 경우, 저것은 도넛그래프가 아닌 guage 그래프이다.
원래 게이지 그래프는 이와 같은 모약을 띄지만, 저 계기판을 360도로 바꾸고, 화살표를 좀 두껍게 하는 등의 속성만 건드려서, 도넛 차트 처럼 보이게 한 것이다.
chart js로 만든 그래프의 경우, chart js는 기본적으로 제공하는 8가지에 대하여, 그래프의 기본이 되는 골자에 대하여, 확장이 가능 하게 만들어졌다. 이 때문에, 찾을려고 노력만 한다면, 다른 사용자가 만들어둔 커스텀 그래프를 사용할 수 있다.
따라서, 나도 그렇게 해보았는데, 방법은 간단하다. 기본 차트 중에 커스텀 할 것을 선택하고, 수정해야 하는 상황에서 오버라이딩 해주면 된다. 당연 저런 모양을 갖게 하려면, canvas에 대한 지식도 필요하고, 저기 저 화살표를 찍게 하기 위하여, 좌표를 찾아줘야 한다. 약간의 수학이 필요하다. <-
어쨋든, 프로젝트를 시작 할 때, 어떤 차트가 들어갈지 정의를 해두고 시작 해야, 어떤것을 선택을 해야 할지구분을 할 수 있으니 상황에 맞게 사용 하길 바란다.
특징은 위의 그림으로 대체 할 수 있을 듯 하다.
오픈 소스이고, 기본으로 제공하는 차트 종류가 8가지 Canvas를 이용해서 차트를 그리고, 반응형을 지원한다.
amchart
amchart는 기본적으로 유료이며, 기본으로 제공하는 차트 종류가 기본적인 차트 + 주식 처럼 보이는 차트 + 지도에 관련된 차트(?) 까지 하면, 기본 제공 하는 종류가 20개 내외 이려나, 일일이 세기에는 양이 좀 많아 보인다. 렌더링은 svg를 통하여 그려지고, 당연 반응형도 지원이 된다.
그러면, 이 둘중에 어떤것이 내 프로젝트에 적합 하냐는 것이 문제이다.
일단, 주식 처럼 보이는 차트나 지도에 관련된 차트(?)가 필요하면, amchart를 선택해야 되는 것은 맞다. 그건 당연한 것이니 빼고 얘기 해보자!
여러 종류의 차트가 필요하다면, 일단은 amchart를 염두해 두는 것이 좋다. 돈 낸 만큼은 하는 듯 하다. 하지만, 기본적인 막대 그래프, 도넛 차트 등, 아주 기본적인 차트들인데, Chart js도 amchart도 그러한 차트가 없을 때가 문제가 된다.
그렇다면, 조금이라도 커스텀이 용이한 것을 찾는 것이 좋을 것이다.
일단 amchart에서 custom이라고 검색 하였을 때, 검색 결과가 61가지가 나온다. 차트의 종류도 많고, 각 차트마다 들어가는 속성이 매우 많기 때문에, 웬만한 내용들은 속성 값을 어떻게 주느냐에 따라서 변경이 가능 하게 된다.
커스텀의 예를 들면, 기본적으로 도넛 파이의 형태를 띄면서, 화살표로 목표를 표시해주는 차트가 필요하다고 생각 해보자.
이것은 amchart로 만든 그래프이고 |
이것은 chart js로 만든 그래프이다. |
모양이 살짝 다르긴 하지만, 완벽하게 똑같이 구현 할 수도 있다. amchart로 만든 그래프의 경우, 저것은 도넛그래프가 아닌 guage 그래프이다.
원래 게이지 그래프는 이와 같은 모약을 띄지만, 저 계기판을 360도로 바꾸고, 화살표를 좀 두껍게 하는 등의 속성만 건드려서, 도넛 차트 처럼 보이게 한 것이다.
chart js로 만든 그래프의 경우, chart js는 기본적으로 제공하는 8가지에 대하여, 그래프의 기본이 되는 골자에 대하여, 확장이 가능 하게 만들어졌다. 이 때문에, 찾을려고 노력만 한다면, 다른 사용자가 만들어둔 커스텀 그래프를 사용할 수 있다.
따라서, 나도 그렇게 해보았는데, 방법은 간단하다. 기본 차트 중에 커스텀 할 것을 선택하고, 수정해야 하는 상황에서 오버라이딩 해주면 된다. 당연 저런 모양을 갖게 하려면, canvas에 대한 지식도 필요하고, 저기 저 화살표를 찍게 하기 위하여, 좌표를 찾아줘야 한다. 약간의 수학이 필요하다. <-
어쨋든, 프로젝트를 시작 할 때, 어떤 차트가 들어갈지 정의를 해두고 시작 해야, 어떤것을 선택을 해야 할지구분을 할 수 있으니 상황에 맞게 사용 하길 바란다.
댓글
댓글 쓰기