Echarts DataZoom

DataZoom 종류

---

 

dataZoomInside

데이터 확대/축소 기능이 좌표계 내부에 내장되어 있어

사용자가 마우스 드래그, 마우스 이동 또는 손가락 터치(터치 스크린에서)를 통해

좌표계를 확대/축소하거나 로밍할 수 있습니다.

 

 

 

dataZoomSlider

마우스 드래그 또는 손가락 터치(터치 스크린에서)로 좌표계를 확대하거나

로밍할 수 있는 특수 슬라이더 막대가 제공됩니다.

 

 

 

dataZoomSelect

확대/축소 또는 로밍 좌표계를 위한 maquee tool이 제공됩니다.

toolbox에서만 구성할 수 있는 datazoom입니다.

 

 

 

 

<SAMPLE>

 

 

 

 

https://echarts.apache.org/en/option.html#dataZoom

Documentation - Apache ECharts

 

 

 

 

Live Chart DataZoom

---

 

실시간 차트 데이터 줌 초기화 문제

 

다양하고 빠른 속도의 dataZoom에 아주 만족하고 있었는데,

문제는 실시간 차트를 그리고 dataZoom을 사용하면 차트가 

refresh될 때마다 원래대로 돌아간다는 것이었습니다.

 

구글링을 해도 정보가 부족하고 이리저리 헤메다가 또

baidu 사이트를 영어로 번역해서 어떻게 찾아냈습니다.

 

 

x, y 축을 가진 그래프를 그렸다고 하고 dataZoom을 다음과 같이 만듭니다.

 

 

dataZoom: [
              {
                  show: true,
                  type: 'inside',
                  filterMode: 'none',
                  xAxisIndex: [0],
                  startValue: 0,
                  endValue: 100
              },
              {
                  show: true,
                  type: 'inside',
                  filterMode: 'none',
                  yAxisIndex: [0],
                  startValue: 0,
                  endValue: 40
              }
            ],

 

⭐Tip 여기서 중요한 건 각각의 dataZoom이 starValue, endValue 초기값을 갖고 있어야 한다는 것입니다.

 

window.onload = function () {
            window.myChart = echarts.init(document.getElementById('main'));

            //scroll datazoom
            window.myChart.on('dataZoom', function(event){
                if(event.batch){
                    option.dataZoom[0].startValue = event.batch[0].startValue;
                    option.dataZoom[1].startValue = event.batch[0].startValue;
                    option.dataZoom[0].endValue = event.batch[0].endValue;
                    option.dataZoom[1].endValue = event.batch[0].endValue;
                } else {
                    option.dataZoom[0].startValue = event.startValue;
                    option.dataZoom[1].startValue = event.startValue;
                    option.dataZoom[0].endValue = event.endValue;
                    option.dataZoom[1].endValue = event.endValue;
                };
            });

		window.myChart.setOption(option);
        }

 

 

사실 이 코드가 어떻게 작동하는지는 잘 모릅니다....ㅎ

근데 넣으니까 되길래 일단 썼습니다😅

 

 

 

 

실시간 차트 toolbox 데이터 줌 초기화 문제

 

ECharts에서 기본 제공하는 toolbox도 기능이 정말 좋은데요.

동그라미 화살표를 누르면 refresh되어 dataZoom을 초기화할 수 있습니다.

 

일반 차트에서는 기가 막히게 잘 먹히지만

실시간 차트에서는 속도가 현저히 느려지거나,

dataZoom start/endValue로 지정한 부분으로 돌아가는 것이 아니라

처음에 그린 xAxis, yAxis의 min, max 값으로 돌아가는 것이 문제였습니다.

 

게다가 ECharts의 수많은 샘플 중에는 제가 참고할 만한 

라이브 차트가 없었습니다.

 

이건 뭐 방법이 없어서 그냥 제가 따로 버튼을 만들어서

초기화 function을 넣어줬습니다.

 

function initGraph(){
            //초기화
            option.dataZoom[0].startValue = 0;            
            option.dataZoom[0].endValue = 100;
            option.dataZoom[1].startValue = 0;            
            option.dataZoom[1].endValue = 40;            
        
            window.myChart.setOption(option);
        }

 

그럼 요런식으로 start/endValue를 다시 지정해주고

그래프를 그리도록 하면 됩니다.