[WEB] ECharts 혼합차트 옵션 (바 색상 변경, 숫자 콤마 넣기, padding 효과)

 

지난번에 Echart 혼합차트 적용 후에 약간의 손질을 했었습니다.

이번에는 조금 더 바꿔봤습니다.

잘 아시는 분들에게는 너무나도 기초적이고 하품나오는 내용이겠지만

기록을 하는 겸, 저 처럼 잘 몰라서 검색하시는 분들에게는 조금이라도 도움이 되었으면 좋겠습니다.

 

 

1. 숫자 콤마 넣기

 

지난번에 만든 그래프를 실제 화면에 적용을 해 봤습니다.

 

 

 

마우스 오버로 툴팁을 볼때... 콤마없이 숫자들이 늘어서 있습니다.

적용 전에는 숫자 단위가 작아서 별 느낌 없었지만..

이정도로 숫자가 커지니까 좀 어지러워 보입니다 ㅎ

그래서 콤마를 넣으려고하는데... 여기 값이 숫자가 아니면 안먹힙니다.

 

정확하게는  PHP에서 콤마를 찍어 출력을 하면 툴팁에서는 보이지만 바 모양이 안나옵니다.

그러면 안되겠죠?

 

 

 

ECharts 혼합차트 뿐만 아니라 나중에 바 차트나 다른데서도 쓸수 있습니다.

여기 too.ltip 부분에보시면 valueFormatter 라고 되어있고, 여기에 그냥 값이 들어가는게 아니라

function 선언이 보입니다.

네. 저렇게 해 줌으로써 일반 JS 하듯 처리를하고, 값을 출력할 수 있습니다.

이렇게 안하면 함수를 사용할 수가 없더라구요.

 

 

 

함수가 아니라 바로 정규식으로 echarts 숫자 콤마 넣기를 해 줘도 좋지만..

저는 이미 만들어서 쓰고있는 함수가 있습니다

그래서 그 함수로 콤마를 넣어줍니다.

 

확인 해 볼까요?

 

 

 

와~~~~ 멀쩡하게 잘 나왔습니다 ㅋㅋㅋㅋㅋㅋ

콤마 없이 값이 들어가서 막대기도 잘 나왔고... 툴팁에서는 보기 쉽게 콤마가 찍혀서 잘 나옵니다.

알고나면 별것 아니지만.. 저는 함수가 안먹혀서 진짜 별 난리를 다 쳤습니다 ;;;

아무튼 echart 숫자 콤마 넣기 포인트는 matter 에다가 function 으로 처리해주기!

 

 

2. ECharts padding 효과 주기

 

제일 처음.. 그래프를 적용시켰을때 제일 눈에 띄던것이 바로 이겁니다.

 

 

 

왼쪽에 보이시죠??  yAxis 부분에 숫자가 너무 커져서 잘려있는거..

0만 보여서 어떤 숫자인지 알 수가 없습니다.

보통이라면 margin 또는 padding 으로 그래프를 옆으로 옮기면 숫자가 나오죠?

하지만 실제로 그래프영역을 옮겨도... 그려진 다음에 출력하는거라서 숫자가 잘린채로 이동이 됩니다.

그렇다면!! 그려질때 옆으로 옮겨서 그려지게 해야하는데요.

ECharts 옵션 중에 어떤걸 해야하는걸까요?????

잘 나와있지도 않고... 이것저것 찾아보다가 될대로 되라.. 하고 위에서부터 그럴싸한것들

하나하나 적용 해 봤습니다.

아는것도 없고, 머리도 나쁘니... ㄷㄷㄷㄷ 몸으로 떼워야죠? ㅋㅋㅋㅋㅋㅋ

 

그렇게 결국 찾아낸 옵션. 바로 grid.

 

 

 

저는 grid 니까 배경 선을 조작하는건 줄 알았습니다.

그런데 에라 모르겠다.. 싶어서 해봤는데!!!!

캬.. ECharts 혼합차트 padding 효과 제대로 나옵니다.

왼쪽에서 20% 만큼!

결과물은?

 

 

 

숫자가 잘려져서 0만 보이던 yAxis 부분이 다 보입니다.

크..

grid 옵션에서 배경의 선도 조절할 수 있지만 이렇게 padding 효과로 top / bottom / left / right 마음대로

옮길수도 있습니다.

 

 

 

20% 는 좀 많이 온 것 같아서 14% 로..

정말 깔끔하게 옮겨져서 너무나도 만족! ㅋㅋㅋㅋ

 

 

 

3. EChart 바 색상 변경

 

이 부분은 검색을 하니 알기쉽게 설명을 해 주신 분들이 계셔서 참고했습니다.

덕분에 일찍 해결을 했습니다 ㅎㅎㅎ

 

우선... 위에 그리드쪽에서 보시면 이번달은 녹색, 지난달은 파란색, 증가율은 노란색입니다.

저는 이번달을 파란색, 지난달을 녹색으로 바꾸고 싶습니다.

그리고 증가율 선도 눈에 띄었으면 좋을것 같아서 색상을 바꿔봅니다.

아주 간단합니다.

 

 

 

series 에서 itemStyle 에다가 color 세팅을 해주시면 됩니다.

정말 간단하죠??

 

 

 

그렇게.. 지난달을 녹색으로 바꿨습니다.

그런데. ECharts 혼합 차트 기본 설정에 들어있는 색상과 조금 꼬이는게 있는지...

지난달 막대가 제일 앞으로 표시되면서 선을 숨겨버립니다.

아니, 같은색이라서 숨겨지는듯한 착시 현상을 주네요.

왜 선 색깔이 같이 바뀌는지 모르겠지만, 당황하지 마시고 계속 지정을 해 줍니다.

 

 

 

이번 달 색상도 지정을 해 줬습니다.

그랬더니 증가율 선 색상이 또 바뀌었네요.

그럼 증가율 선 색상도 한번 바꿔보겠습니다.

노란색은 잘 안보였으니 붉은 계통으로!

 

 

 

우왕!!! 잘 보입니다 ㅎㅎㅎㅎㅎㅎㅎ

아.. 이럴거라면 지난달 변경하고 증가율 색상을 바꾸면 되는 문제 아니었나??

이번달은 왜 바꾼거지 ㅋㅋㅋㅋㅋㅋ

뭐 암튼.

 

ECharts 혼합차트 바 색상 변경 옵션은 아주 간단합니다.

당연히 혼합뿐만 아니라 바차트 에서도 쓸수가 있는것이고, 라인차트에서도 쓸 수 있습니다.

알아두시면 편해집니다 ㅎㅎㅎㅎ

 

 

지금까지 echarts 옵션 공부를 할 겸 바 색상변경, padding 효과, 숫자 콤마넣기 같은것들을 해봤는데요.

이것들을 성공하고 나니!!! 하나 더 욕심이 생기는게...

지금 grid : left 14% 상태인데, 숫자를 줄이면 좀 더 넓게 표시할 수 있지않을까.

툴팁에서 보기 편하지 않을까!!!!

 

그렇습니다. 100만이 넘어가면 M 으로 줄여주는 그거!!!!!

한번 해봤습니다.

함수도 쓸수있고, JS처럼 동작할수 있다면야.. 그리 어렵지 않겠죠? ㅎㅎㅎ

 

 

 

툴팁을 보시면 데이터가 100만 미만, 100만 이상의 수치를 확인 하실 수 있습니다.

100만 이상이라면 좀 줄여서 보는게 더 편하고 좋겠죠???

물론, 정확한 수치를 출력해야한다면 안하시는게 좋지만, 대략적인 수치만으로

OK 라고한다면 줄이는게 보기 편합니다.

 

 

 

이렇게!!!  $ 1.3M 라고 간편하게 볼 수 있습니다.

훨씬 보기 편하죠?? 그쵸??? 저만그런거 아니죠?? ㅋㅋㅋㅋㅋㅋ

그럼 yAxis 를 바꿔보겠습니다.

여기는 yAxis 바꾸는거 그대로 해주시면 되는거라서..

 

 

 

여기 데이터에서 yAxis 부분을 보겠습니다. 100만 초과인 데이터들 뿐이죠???

여기서 0을 줄일수있다면 좀 더 넓게 볼 수 있을겁니다.

 

 

 

옵셔넹 보시면.. axisLabel의 경우에는 저렇게 되어있습니다.

저 상태에서 JS 동작은 먹히지가 않으니 function 으로 돌려줍니다.

 

 

 

값을 받아서 999999 이상이면 100만으로 나눠줍니다.

그리고 소수점 두자리까지 나타내려고 toPrecision(2) 를 넣어줬습니다. => toFixed(2) 로 변경

여기서 주의하실 점.

저도 이거 캡쳐하면서 할 때에는 잘 되었는데, 나중에 다른숫자들을 출력하니 엉망이 되었는데요.

조금 찾아보니 이런 차이가 있다고 합니다.

 

toPrecision : 표시되는 숫자의 자리수를 제한.

toFixed : 표시되는 숫자의 소수점 자리수를 제한.

 

그렇습니다.

저는 검색을 하다가 반올림시에 에러가 나네마네하면서 toPrecision을 쓰면 좋다고해서

그냥 썼는데.. 저런 함정이 있었네요.

 

 

 

당장 여기서는 이렇게 나옵니다.

2자리만 나오니.. 소수점 하나로만해서 잘 나오네요.

 

 

 

당연히.. 다른 자리 숫자라고해도 잘 나옵니다.

그럼 이와같이 tooltip 쪽에서도 적용을 해 줍니다.

위에 숫자 콤마넣는거 보시다보면 어디에 추가를 해줘야하는지 알 수 있습니다.

valueFormatter 부분. 아시죠? 

 

 

저는 여기까지 사용하는지라.. 이 이상은 파고들지 않지만

언젠가 더 손을 봐야한다면 추가로 기록 해 보겠습니다.

일단 뒷 배경에 grid 선이 좀 거슬리긴 한데... ㅋㅋㅋㅋㅋㅋㅋ

echart 혼합 차트 말고도 다른 쓸만한게 있으니 적용하는대로 기록 해 보겠습니다.