[하이차트(highchart)] 웹차트(주식) 적용기 - 2

간만에 하이차트 포스팅을 한다.

아무래도 백엔드 지향이다 보니 프론트쪽 개발은 쥐약이라

그때그때 찾아서 하는 편이지만, 필요할 때 찾는 수고를 조금이라도 덜어보기 위해

필요한 기능은 정리해두려 한다.

 

오늘은 하이차트 내에 줌 인/아웃 버튼을 넣어보자

특히 아래의 차트 내용 중 빨간 네모 안에 있는 줌 인/아웃 버튼 그림을 넣어보고자 한다.

이건 하이차트로 구현되어 있는 '다음'의 주식 차트다

 

막간 이론을 추가하자면

하이차트에는 지금 넣어보려고 하는 '이미지' 와 '툴팁' 기능이 있다.

하이차트 내 작업을 하기 전에 지금 필요한 기능이 '이미지' 인지 '툴팁' 인지 확인하는 것이 중요하다.

(이 부분을 처음에 잘 구분하지 못해서 툴팁 기능에 대해서만 1시간 넘게 찾다가 '이미지' 기능을 통해 해야 한다는걸 알고 나서는 5분도 안되어 해결할 수 있었다 😅)

 

이미지와 툴팁은 차트 내에서 그려지는 특정한 모양 이라는 공통점이 있지만,

차이점이 존재한다.

우선 툴팁은 아래 이미지에서 확인할 수 있듯이 특정 시점의 값(그래프의 값)을 선택하거나 마우스 오버를 하게 되면

해당 값에 대한 내용을 확인하게 해줄 수 있는 간략한 텍스트 혹은 이미지(or HTML)이다.

이건 툴팁이다.

 

그럼 위 그림에서 빨간 네모 안에 나오는 건 툴팁일까? 이미지일까?

 

보통 크게 착각하는게 내가 선택한 그래프 바로 위 혹은 옆, 그것도 아니면 어쨌든 그 언저리에 나오는 내용이 툴팁이라고 생각하는 것이다.

그렇다면 바로 위 그림에서 빨간 네모 안에 있는 부분은 툴팁이 아니라 이미지를 넣은 것일까?

 

아니다, 위 빨간 네모칸 안에 있는 내용도 툴팁이다.

단지 HTML로 특정 포지션에 위치시킨 툴팁일 뿐이다. 고정된 위치 값에서 내가 선택한 그래프의 값들을

한눈에 보여주게끔 HTML로 제공한 것 뿐이다.

 

그렇다면 다시 처음으로 돌아가서

이건 하이차트로 구현되어 있는 '다음'의 주식 차트다

이 이미지에서 확대 축소 버튼은 툴팁일까 이미지 일까?

정답은 이미지이다. 그래프 값과 관계없이 특정 위치에 존재하는 이미지인 것이다.

그래프 값에 의존하여 그려지는 내용인지 아닌지에 따라 그 차이가 존재하는 것이다.

 

자 그럼 '다음' 차트와 같이 줌 인/아웃 버튼을 넣으려면 어떻게 해야 할까

지난번 기본 차트 스크립트에서 chart : { events : { render... 이 부분을 추가하면 된다. (아래 스크립트 참고)

var stockChart = Highcharts.stockChart('stock-graph', {
    rangeSelector: {
        selected: 1
    },
    chart :  {
        events: {
            render: function() {
               zoomIn(this);
               zoomOut(this);
           }
        }
    },

    title: {
        text: 'AAPL Stock Price'
    },

    series: [{
        name: 'AAPLA',
        data: data,
        tooltip: {
            valueDecimals: 2
        }
    }]
});

 

줌 인/아웃 부분의 함수는 다음과 같다

function zoomIn(chart) {
    chart.renderer.image('이미지주소값1', 600, 200, 30, 30)
                .on('click', function() {
                    alert('줌인');
                })
                .attr({
                    zIndex: 100
                })
                .css({
                    cursor: 'pointer'
                })
               .add();
}

function zoomOut(chart) {
    chart.renderer.image('이미지주소값1', 630, 200, 30, 30)
                .on('click', function() {
                    alert('줌아웃');
                })
                .attr({
                    zIndex: 100
                })
                .css({
                    cursor: 'pointer'
                })
               .add();
}

 

코드에서 알 수 있듯이

이미지 클릭시에 기능할 수 있는 click 이벤트도 지원한다.

alert이 있는 위치에 실제 줌 인/ 아웃 기능을 넣으면 된다.

이 기능에 대해서는 다음에 포스팅 해보겠다.

 

그래서 결과를 확인해보면...!

 

결과화면 예시

다음 차트와 같이 잘 어울리는 아이콘은 아니지만 어쨌든 이미지는 들어갔다 ㅎㅎ