amCharts 5 - 맵 차트 국가별 색상 지정하기 (명도,채도로 순위 매기기)

 

이런거 참 간만에 써봅니다.

 

얼마전 업무를 보다가 차트중에서 맵차트를 쓰게 되었는데요.

제가 프런트는 참 모르는편이라.. chart js에서 눈꼽만큼 땡겨쓰는 정도만

하고 있었습니다.

 

그런데 국가별 랭킹에서 해당국가를 순위별로 색상을 입히자는 이야기가 나왔습니다.

 

다행히 우리 퍼블리셔가 열심히 공부하면서 만들고있는지라..

이런 차트같은것도 어디서 잘 들고와서 잘 적용하고있습니다.

하다하다 잘 안되는부분은 제가 손을 대 보기도하는데 그런일은 거의 없어서

 

프론트의 위대함을 새삼 느끼고있죠 ㅎㅎ

풀스택하시는분들은 진심 천상계인가...ㄷㄷㄷ

 

 

그래서 기록 할 겸!

맵차트에서 나름 유명한 amCharts 를 이용한 색상바꾸기를 해 봅니다.

 

 

 

여기가 홈페이지.

각종 차트들이 있는데, 그중에서 Map chart 를 사용하시려면

왼쪽 메뉴에서 Maps 를 선택하시면

이렇게나 많은 차트들이 있습니다.

 

 

 

국가별로 지역까지 표시한것도 있는데

그정도까지는 필요 없으니 간단히 국가별로 나눈 차트를 사용합니다.

 

이번에 사용하는건 최신버전인 amChart 5 입니다.

 

그런데 아무리 옵션을 찾고, 매뉴얼을 뒤져봐도

국가별로 색상을 어디서 어떻게 바꾸는지 나와있지가 않습니다 ;;;

제가 못찾았을수도있는데..

공식사이트 doc을 봐도 안보입니다.

걍 제가 이해를 못했거나 응용을 못했을수도 있는데..

 

저한테 보인것은 amCharts 5 종류별 맵에서 데이터를 어떻게 세팅하고

패턴은 이렇게, 뭐는 이렇게..

각 종류별의 기능을 적용하기 위한것뿐이었습니다.

 

어느국가에는 어떤색, 어느국가에는 어떤색. 이런게 없었습니다.

 

결국 예제들을 뒤져보고, 검색을 해 봐도 그런 예시는 보이지않았고.. ㅠㅠ

제가 하고싶은건

파란색 계열로 명도채도를 나눠 랭킹이 높으면 진하게.. 낮을수록 연하게 표시하는겁니다.

 

그러다 우연히 발견한거!!!

 

 

 

이 중에 있습니다 ㅋㅋㅋㅋ

물론, 다른 차트쪽에서 본거지만.. 예제를 뒤질때에는 전혀 상관없다 생각해서

그냥 넘어갔던 히트맵 (Heat Map)!!!

 

히트맵의 예제는 지역별로 어떤 값에 따라서 색상을 다르게 하는겁니다.

우측에 색상바도 나와있고, 지역이라서 해당사항이 없다고 생각했는데

옵션을 달리하면 한 나라의 지역별이 아닌

세계의 나라별로 바꿀수가 있었습니다.

 

당연하지만, 이런 생각도 예제를 다 뒤져보고있으니

여기를 이렇게하면 되는거 아닌가?? 라는 생각까지 할수있게되어

바꿔보니 되더라.. 하던거였습니다 ㅋㅋ

역시 해보는게 제일이죠.

 

 

 

히트맵의 예제입니다.

저같은 쪼렙들은 다른데 보지말고.

Create chart  부분부터 보면 됩니다.

이것저것 설명은 귀찮으니 대충..

 

결과물은 이렇게 되었습니다.

 

 

우측에 색상바도 없앴는데, 요청으로 인해 살리고, 우측으로 보냈습니다.

1위부터 10위까지 색상으로 표시.

 

아..근데 왼쪽아래 저 amCharts 로고 어떻게 못없애나요? ㅠㅠ

아무리 찾아도 저긴 못찾겠습니다 ㅠㅠ

미치겠네 ㅋㅋㅋㅋ

 

아무튼. 저렇게 세팅하기위해서 대충 둘러보면.

 

 

 

우선 PanY 부분이 none 으로 되어있는데,

그렇게하면 Y축이 고정입니다.

확대를 해도 위로 올릴수가 없습니다.

 

그래서 X와 동일하게 rotate를 세팅하면.. 위로 갈수있나???

 

 

 

이렇게 Y축 한가운데를 중심으로 지도가 돌아버립니다.

진짜 돌아버리네요 ㅋㅋㅋㅋ

 

그래서 이 부분은 ratate가 아니라 translate로 줘야합니다.

결론적으로 주석을 달아보면..

 

 

 

이렇게 됩니다.

제가 변경 한 부분은 총 네군데.

히트바를 출력하지 않는다면 layout 부분은 주석처리하셔도 됩니다.

위에서 언급했듯이 첨에는 히트바를 없앴는데

나중에 살렸거든요.

근데 왼쪽으로 표시가 되길래 layout 인데다가 horizon 이라고 되어있어서

저부분을 살려보니 우측으로 갔습니다 ㅋㅋㅋ

 

 

 

나머지는 이렇습니다.

백그라운드 배경색은 다른 예제에서 찾아서 가지고왔습니다.

제가 거의 대부분의 amCharts 5 맵 차트 종류를 보시면

기본색상이 조금 짙은 파란색입니다.

그리고 기본 나라색상들을 세팅하는건 나와있지않습니다.

 

진심 여기저기 다 뒤지다가

제가 회색으로 되어있는 예제들을 보면서 그럴싸한걸 적용하면서 찾았습니다 ㅠㅠ

지금보니 배경색이랑 툴팁부분은 합쳐도 되겠네요 ㅎㅎㅎㅎㅎ

 

마우스 오버에서는 값은 빼고 이름만 나오게 했고,

맵차트 국가별 색상 지정은 범위로, 최소값 / 최고값을 입력합니다.

물론 명도,채도를 따져가면서 값 범위를 정하시면

훨씬 자연스럽게 하나의 색상에서 밝기만으로 표시가 될겁니다.

 

0x 뒤로 16진수 색상코드 넣으시면 됩니다.

 

그리고 국가별 값세팅부분은 예제 그대로구요.

저는 저부분을 미리 10위까지 배열로 만들어놓고, 값도 다 세팅한다음에

for문으로 돌려놨습니다.

값도 예제에 저런식으로 천만단위를 넘어가있길래 열심히 격차를 준다고

값을 만들었는데, 그냥 뭐..

마우스오버시에 값이 안나오니.. 1~10까지만 주면 간단히 되었습니다 ㅎㅎㅎ

 

아무튼 여기까지만 하면 이렇게 나옵니다.

 

 

 

크.. 진짜 한시간동안 삽질하다가 이 화면을 봤을때의 그 감동!!! ㅠㅠ

실제 완성된건 위에서 보셨을테고...

 

이 화면과 다른건 배경의 회색이 좀 더 연해지고,

국가들 랭킹별로 색상 세팅들이 다 되어있을거고..

그렇습니다.

여기까지만 하셔도 맵 차트 국가별 색상 지정은 됩니다.

명도,채도 잘 모르시면 그냥 디자이나, 퍼블리셔한테 맡기세요 ㅎㅎㅎ

저는 몰라서 대충 색만 만들고 맡겼습니다.

 

 

이거 찾아보다 안되면 amCharts 5 말고 다른버전 맵 차트 쓸 생각이었는데

그래도 잘 해결되었습니다.

왼쪽 아래 로고만 빼고! ㅠㅠ

 

 

아, 히트바..

 

 

예제랑 크게 달라질건 없구요.

기존 지역별 마우스 오버시 값 표시하면 히트바에서도 어느정도 표시가 되는지에

대한 설정은 제외시켰습니다.

왜냐하면 표시를 안하고있으니까..

근데 지금 생각하니 같이 적용하면 어느 국가가 몇위인지 알수있으니

넣는게 좋겠네요.

 

이렇게 포스팅하면서도 알아서 일을 늘이는 나란녀석... ㅠㅠ

 

보시는데로

start / end 컬러는 min / max 컬러와 동일하게 설정해주시고

최고, 최저를 나타낼 텍스트를 세팅합니다.

step count 는 최저부터 최고까지 몇단계로 나눌것인지 세팅.

그리고 아래에 startLabel / endLabel

말안해도 아시겠죠? ㅎㅎ 표시되는 글자의 크기랑 색상.

색상은 위 세팅중에 있으니 건들지않아도 됩니다.

 

대략 이정도면 처음보신 제 완성품정도의 전세계 국가별 색상을 지정하는 맵차트 완성입니다.

 

이 쪼렙이 이거 만든다고 두시간정도를 낑낑댔습니다.

그중 절반정도를 amCharts 사이트에서 문서 뒤지고..(뒤져도 안나와서 열불났음)

남은 절반중의 절반은 인터넷 검색을 하고....

(진심 정보가 없었음. 막대그래프나 기본 세팅같은게 대부분..)

남은 시간은 예제들 옮겨다가 이것저것 짜맞추고..

(이 짓 하다가 유레카!!! 했다는 ㅋㅋ)

 

뭐 그렇습니다.

앞으로 이런일 있으면 자주 글써서 기록을 남겨야

담번에 찾아서 참고하고 하겠죠 ㅎㅎㅎ

귀찮아서 기록안한게 부지기수인데 ;; 반성..