[WEB] Apache ECharts 바 차트 음수 출력 - PHP abs (음수 정수 변환, 절대값)

2022. 10. 6. 14:05기술집/WEB관련

728x90

 

지난번에 바차트 적용하는걸 봤습니다. 살짝.. 기울여보기도 했었죠? ㅋ

이번에는 지난 글에서 마지막에 있었던 문제를 해결 해 보도록 하겠습니다.

 

바로 이거!

 

 

양수일때에는 밑에서 위로 잘 올라가있던 막대기들이..

음수로 들어오니까 위에서 밑으로 떨어져 내려옵니다.

이러면 안되는데..

 

Apache ECharts 에서 자동으로 값을 인식해서 0의 위치를 잡는데요.

만약 저기서 양수가 나오면 중간쯤에서 위아래로 막대가 뻗어나갑니다.

후.. 이거 분명 옵션중에 있을텐데..

찾다찾다 포기했습니다. echarts 바 차트 음수 라고 검색을해도 안나옵니다 ㅋ

이런 된장을 퍼먹을....;;;;;

 

처음에 생각한 방법이 있었는데 옵션을 찾아보고 간단히 해결할수 있으면 간단히 하자..싶었지만

안보이니 처음방식대로 하겠습니다.

그런 PHP단에서 음수를 제거하고 값을 준 다음에 yAxis 출력시에 ' - ' 기호만 붙여주면...

완벽하겠죠???

제가 부족함이 많아서 못찾고... 그냥 생각한 방법대로 합니다.

 

 

이미지가 작아서 서명도 잘렸네요 ;;;;

ECharts 바 차트 출력부분입니다.

배열안에 있는 cha 를 변수 cha에 대입합니다.

그리고, 그 cha 값을 출력하고있는데요...

이게 음수들의 행렬이 된다는거죠.

 

그럼 머리를 굴려봅니다. 음수를 한번 더해서 0으로 만든다음에 또 한번 더하면...????

오..완벽해!!!!

 

 

음수가 0으로 올라가려면 빼야합니다. 

뭘??? cha 를 더해서 두배로 만든 값을 말이죠.

*2 를 하나.. 두번 더하나.. 똑같으니까 덧셈으로 갑니다.

이렇게 하니까 원하는 결과값이 나왔는데요...

 

728x90

 

 

와..... 거꾸로 내려오던 막대기가.. .위로 솟구치고 있습니다.

그쵸.. bar chart 는 이게 베이직! 기본! 아닐까요? ㅋ

근데.. 뭔가... 맘에 안듭니다 ;;;

제가 머리 나쁜 티를 너무 낸거죠.. ㅋㅋㅋㅋㅋㅋ

 

PHP 음수를 양수로 변환 하기위해서 정말 딱 맞는 함수가 있습니다.

바로 abs 함수인데요. 이녀석은 절대값을 반환합니다.

즉!!! 숫자앞에 붙어있는 기호는 다 빼버리고 숫자만 돌려줍니다.

아... 왜 그걸 빨리 생각하지못했을까.... ㅋㅋㅋㅋ

 

이래서 머리가 나쁘면 손구락이 고생한다고....

아무튼 먼저 PHP abs 함수를 이용해 절대값을 구해줍니다.

 

 

무의미하게 반복되던 변수들을 지워버리고.. 한줄로 깔끔하게!

abs 함수를 이용해 PHP 음수를 양수로 변환 해 주고!!! (절대값으로 만들어 주고!!!!!)

바로 대입을 한 다음에 출력을 합니다.

저기서 바로 출력을 해 줘도 되는데... 또 막 싱글쿼트 쪼개고 나누고 합치고...

그게 영 번거롭고 복잡하게 보여서 저는 변수에 넣은다음에 보기 쉽게 출력으로 갑니다.

개인적인 취향이니 뭐라 하지는 마세요 ㅠ

 

 

조금 전과 동일하게 막대기는 위로 잘 올라가고있습니다. 야호~ ㅎㅎㅎㅎ

이정도라면 PHP 절대값 구하는데는 abs 함수를 잊지말자! 라고 알수있겠죠?

하지만 yAxis 값을보면... 양수로 되어있습니다.

이러면 안되죠.

음수로 나와야하니까요.. PHP 음수를 양수로 바꿨으니.. (abs야 고마워 ㅠ)

이제는 ECharts 바 차트 출력을 한번 만져 볼까요?

 

 

요기는 뭐 간단합니다.

yAxis 부분이니... 해당 부분에서 axisLabel 에다가 formatter 지정해서 저렇게. 

간단하죠? 전부 php 단에서 음수를 양수로 변환 해 놨기때문에 출력에서는

편하게 할 수 있습니다.

어차피.. PHP로 하던가 JS로 하던가의 차이일 뿐이지만요 ㅋㅋㅋ

저는 당연히 PHP가 편하니..

 

아무튼 이렇게 기호만 붙여서 출력!

 

 

오....... 음수로 보입니다 ㅋㅋㅋㅋㅋㅋㅋㅋ

여기서 조금 더 보태면... M (Million) 처리와 $ 기호의 추가가 되겠죠.

각자 상황에 맞는 문자열을 만들어 내면 될 것 같습니다.

지금까지 3종류의 Apache ECharts 차트를 만져 봤는데요.

조금만 더 잘 알고, 옵션을 이해한다면 바 차트 뿐만아니라 다른것들도

어려움 없이 쓸 수 있을것 같습니다.

 

근데 정보가 참 없어서.....;;;;;;

아무튼. 다른 옵션이 있을수도 있습니다.

제가 쪼렙이라서 못찾았을 가능성이 매우 크구요..

저는 이런 방식으로 ECharts 바 차트 음수 출력을 위로 솟구치게 했습니다.

다른 방법 아시는분이 계시면 댓글로 가르침을 좀.... ㅠㅠ

 

이번에는 PHP + ECharts 내용이 되어버렸는데요.

덕분에 절대값 함수도 알게 되었고, 바 차트 제어도 할 수 있어서

좋은 기회가 아니었나 생각이 듭니다 ㅎㅎㅎㅎㅎㅎ

 

이정도로 그래프가 끝인데...

혹시나 다른 그래프 더 만지게 되면 또 기록할 겸 끄적이도록 하겠습니다~~!!!!

728x90