[Highcharts] Key events 플래그 만들기

안녕하세요 :)

 

구글 파이낸스 웹사이트에서는 Key events라는 신기한 기능을 지원하길래 비슷한 기능을 highchart로 구현해 보았습니다.

Key events 기능은 영문버전에서만 지원됩니다.

Key events란 특정 시점에 어떤 일이 있었는지 자세히 알려줄때 유용한 기능입니다.

위와 같이 차트상 어떤 시점에 중요한 이벤트가 있었다면 표시하는 방식으로 사용자가 빠르게 중요 과거사에 대해 알 수 있도록 해줍니다.

 

지금 근무하는 회사에서도 주식 차트를 다루기 때문에 해당 기능을 구현하면 좋겠다 싶어 한번 기능 구현만 간단하게 해 보았습니다.

사실 highchart에서는 필요한 기능을 이미 지원하기 때문에 별다른 기능추가 없이 간단하게 keyEvents 차트를 만들 수 있습니다.

 

위 플래그 부분의 경우 아래와 같이 코드를 추가하면 됩니다.

{
    type: 'flags',
    fillColor: '#395C84',
    cursor: 'pointer',
    style: {
      color: '#fff'
    },
    point: {
      events:{
        mouseOver: onOver
      },
    },
    states: {
      hover: {
        fillColor: '#668f73',
      },
    },
    data: [
      {
        id: 0,
        x: 20,
        title: 'Political issue',
        text: 'A Event'
      },
      {
        id: 1,
        x: 240,
        title: 'Political issue',
        text: 'B Event'
      },
    ]
},

각 포인트에 mouseOver와 같이 이벤트리스너를 붙일 수 있으니 매우 간편합니다.

플래그 위로 커서가 위치하면 onOver 함수가 실행됩니다.

 

추가로 플래그를 둘러싼 회색 영역 표시는 아래의 코드를 추가해 줍니다.

xAxis: {
  plotBands: [
    {
      color: 'grey',
      from: 10,
      to: 30,
      id: 0,
      events: {
        mouseover: function() {
          updateId(this.id)
        }
      }
    },
    {
      color: 'grey',
      from: 230,
      to: 250,
      id: 1,
      events: {
        mouseover: function() {
          updateId(this.id)
        }
      },
    },
    {
      color: 'grey',
      from: 660,
      to: 680,
      id: 2,
      events: {
        mouseover: function() {
          updateId(this.id)
        }
      },
    },
    {
      color: 'grey',
      from: 870,
      to: 890,
      id: 3,
      events: {
        mouseover: function() {
          updateId(this.id)
        }
      },
    },
  ]
},

이 부분에서도 mouseover와 같은 이벤트리스터를 붙일 수 있습니다.

회색 영역을 지날 때마다 updtateId함수에 회색 영역의 id값을 전달합니다.

 

자세한 코드는 아래 코드샌드박스를 참조하시길 바랍니다.