[Echarts] 그래프에 위치 별로 tooltip 넣기, grid 설정

Echats를 사용하여 그래프를 그리고 있는데, 저희가 그래프를 표현하는 곳의 디자인이 굉장히 작아서

그래프도 최대한 크게 만들어 보고, 그래프의 라벨이 작아서 툴팁도 만들어 보았습니다.

 

어떻게 생성하는지 알아볼까요?

 

먼저 제가 작성한 글을 읽으면서 echart 사용법을 알아본 후 조건 설정을 해보면 좋겠습니다.

https://pabeba.tistory.com/238

JavaScript - ECharts 사용하는 법

 

잘 숙지하셨다면

https://echarts.apache.org/examples/en/index.html

Examples - Apache ECharts

여기로 들어가서 exmaple 아무거나 들어가서 option 만 변경하면 그래프를 그려볼 수 있습니다.

 

예시 코드는 제가 드릴게요.ㅎㅎ

 

Echarts tooltip 넣기

여러분 너무 길다고 겁먹지 마세요. 제가 필요한 옵션 파라미터만 잘 설명해 볼게요.

var option = {
        		tooltip: {
							trigger: 'item',
							position: function (point, params, dom, rect, size) {
					            var x = 150; // x 좌표 조절
					            var y = 50; // y 좌표 조절
					            console.log(point[0])
					            if(point[0]<510){
					            	return [point[0], point[1] - y];
					            } else if (point[0]>510){
					            	return [point[0]-x, point[1] - y];
					            }
					        }
						},
                grid: {
                    left: '1%',
                    right: '4%',
                    bottom: '10%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    data: ['새우깡',
                        '오징어집',
                        '포카칩',
                        '짱구'
                    ],
                    axisLabel: {
                        fontSize: 11,
                        fontFamily : 'Noto Sans KR'
                    },
                    splitLine: {
                        interval: 0,
                        show: true
                      },
                      axisTick: {
                          length: 0
                      }
                },
                yAxis: {
                    axisLine: {
                        show: true
                    }
                },
                series: [{
                    data: [{
                            value: 1400,
                            itemStyle: {
                                color: '#A155B9'
                            }
                        },
                        {
                            value: 1500,
                            itemStyle: {
                                color: '#3E65AA'
                            }
                        },
                        {
                            value: 2000,
                            itemStyle: {
                                color: '#E76AA0'
                            }
                        },
                        {
                            value: 3000,
                            itemStyle: {
                                color: '#33A8CA'
                            }
                        }
                    ],
                    barWidth: "30%",
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'top',
                    }
                }]
            };

 

1. tooltip을 넣기 위한 option은 이렇습니다.

tooltip: {
	trigger: 'item',
	position: function (point, params, dom, rect, size) {
  	  var x = 150; // x 좌표 조절
  	  var y = 50; // y 좌표 조절
 	   console.log(point[0])
 	   if(point[0]<510){
 	      	return [point[0], point[1] - y];
  	   } else if (point[0]>510){
  	     	return [point[0]-x, point[1] - y];
  	   }
  }
}

 

2. trigger 옵션에는 item, axis, none을 넣을 수 있습니다.

이거는 직접 넣어보면서 어떻게 변하는지 보면 재밌습니다.

 

3. position이 중요한데, console.log를 넣은 이유를 알려 드리겠습니다.

point: 마우스 포인터 위치

params: 툴팁에 표시될 데이터 및 시리즈 정보

dom: 툴팁의 DOM 요소

rect: 그래프 요소의 사각 영역

size: 차트의 크기

 

이 중에서 다른 파라미터는 사용하지 않았고 point 만 사용해 보았습니다.

point[0] 이 화면의 x축 좌표를 의미하고, point[1] 이 화면의 y축 좌표를 의미합니다.

따라서, console 창에 나오는 숫자들을 확인하면서 어느 위치부터 어느 위치까지

툴팁이 왼쪽에 나올지, 오른쪽에 나올지를 선택할 수 있습니다.

 

위의 예시에는 x축의 좌표가 510 이하일 때와 이상일 때 위치의 변화를 주었습니다.

 

이런 것도 직접 해보면서 알아가면 더 좋다고 생각이 듭니다.

 

그림을 보시면 아시겠지만 왼쪽에 있는 두 개는 오른쪽으로 툴팁이 나오고,

오른쪽 두 개는 왼쪽에 툴팁이 나오게 하였습니다. (화면을 삐져나오면 안 되기 때문이죠.)

 

아무튼 이렇게 해서 tooltip의 위치를 주는 것을 알아보았습니다.

다음은 grid 를 주는 것입니다.

 

Echarts grid 옵션

grid: {
    left: '1%',
    right: '4%',
    bottom: '10%',
    top: '10%',
    containLabel: true
}

 

1. grid 옵션은 %로 조건을 주고 있는데 그냥 숫자로만 하셔도 변화합니다.

2. 의미하는 것은 css의 magin 느낌이라고 생각하시면 됩니다. 숫자를 높이면 그만큼 그쪽 방향에 여백이 생깁니다.

이것 또한 직접해보시면서 느끼는 것이 좋을 것 같습니다.

 

너무 대충 알려주는 것 같아 보이지만 아닙니다. 직접 해보는 것과 안 해보는 것은 느낌이 다릅니다.

 

꼭 저기 example 사이트에 가서 직접 해보시는 것을 강추합니다!!

 

소감

AI의 시대가 오면서 하드웨어의 진화가 일어나고 그 다음은 소프트웨어가 진화하겠죠.

어떤 프로그램이 나오면 좋을지에 대하여 생각하면서 살아가다보면 아디디어가 나올 것이라고 저는 굳게 믿습니다.

공부도 하면서 말이죠.