FusionChart에서 Annotations으로 Tooltip 만들기

Annotations의 개념

FusionChart 공식 홈페이지에서는 Annotation을 차트 위에 그리는 사용자 정의의 객체나 도형으로 정의하고 있다. 차트 위에서 추가적인 선이나 다양한 모양의 선, 혹은 이미지를 추가해서 더 차트를 효과적으로 표현할 수 있게 하는 것이다.

 

Annotation을 통해서 툴팁을 보조하거나 대체할 수도 있다.

 

FusionChart의 툴팁 또한 HTML을 통해서 상당히 자유롭게 custom 할 수 있지만, 가끔 차트마다 반드시 나타나는 툴팁 형식이 고정되어 있는 경우가 있다. 이럴 때 Annotation을 통하면 더 자유롭게 툴팁을 만들 수 있다.

 

 

툴팁이 될 Annotation 만들기

위의 이미지에서 툴팁은 크게 4가지 부분으로 구성된다.

lable이 들어갈 네모, 화살표 모양을 하는 세모, 현재 시간을 표현해주는 label, 그리고 이미지 이렇게 4부분이다.

이는 각각 annotation에서 tooltip-base, tooltip-base-triangle, tooltip-label, tooltip-image 로 표현되어 있다.

 

visible을 모두 '0'으로 설정한 이유는 처음에 차트에 진입해서 커서를 올려놓지 않았을 때에는 Annotation이 보이지 않기 위해서 설정해둔 것이고, 아래에서 커서가 그래프에 올라가면 annotaion.show()를 통해서 visible을 '1'로 셋팅하게 된다.

const annotation = {
    autoscale: '1',
    groups: [
        {
            id: 'tooltip',
            showBelow: '0',
            items: [
                {
                    id: 'tooltip-base',
                    type: 'rectangle',
                    radius: '2',
                    alpha: '90',
                    fillColor: twColor.pz.black,
                    visible: '0',
                },
                {
                    id: 'tooltip-base-triangle',
                    type: 'polygon',
                    sides: '3',
                    startangle: '270',
                    alpha: '90',
                    fillColor: twColor.pz.black,
                    radius: '6',
                    visible: '0',
                },
                {
                    id: 'tooltip-label',
                    type: 'Text',
                    fontSize: '11',
                    bold: '1',
                    fillcolor: twColor.pz.white,
                    visible: '0',
                },
                {
                    id: 'tooltip-image',
                    type: 'image',
                    xScale: '12',
                    yScale: '12',
                    url: congestionImageUrlList[1],
                    visible: '0',
                },
            ],
        },
    ],
}

 

 

 

커서의 움직임에 따라 툴팁처럼 작동하기

툴팁처럼 작동하기 위해서는 event에서 설정을 해주면 되고, dataplotrollover라는 차트의 데이터플랏에 커서를 올려두었을 때 (rollover)어떤 이벤트가 일어날 지 설정해주는 함수를 만들어서 위에서 만든 annotation의 위치와 label을 변경하면 된다.

 

dataplotrollover 기능에 대해서는 FusionChart 공식홈페이지를 읽어보면 도움이 된다.

FusionChart 이벤트 - dataplot rollover

Various Events | FusionCharts

 

아래 함수는 rollover 이벤트가 발생되었을 때 argObj에서 내가 커서를 올린 데이터의 index와 categoryLabel을 구할 수 있다.

데이터의 index를 통해 annotation의 위치를 지정하고, categoryLabel을 통해서 툴팁 텍스트를 생성할 수 있다.

 

유사하게 dataplotrollout 함수를 활용하면 커서가 차트에서 빠져나왔을 때 다시 annotation을 보이지 않게 만들 수 있다. annotation을 보이지 않게 하기 위할 때에는 annotation.hide()를 사용하면 된다.

const event = {
    dataplotrollover: function (evtObj: any, argObj: any) {
        const annotations = evtObj.sender.annotations
        const index = argObj.dataIndex
        const timeLabel = `
            ${TimeStringTransform(argObj.categoryLabel)[0]} ${TimeStringTransform(argObj.categoryLabel)[1]}시
        `

        annotations.show('tooltip-base')
        annotations.show('tooltip-base-triangle')
        annotations.show('tooltip-label')
        annotations.show('tooltip-image')

        annotations.update('tooltip-base', {
            x: `$dataset.0.set.${index}.x-${timeLabel.length}-10`,
            y: `$dataset.0.set'.${index}.starty-3`,
            tox: `$dataset.0.set'.${index}.x+${timeLabel.length}+35`,
            toy: `$dataset.0.set'.${index}.starty-26`,
        })
        annotations.update('tooltip-base-triangle', {
            x: `$dataset.0.set.${index}.x`,
            y: `$dataset.0.set.${index}.starty`,
        })
        annotations.update('tooltip-label', {
            text: `${timeLabel}`,
            x: `$dataset.0.set.${index}.x`,
            y: `$dataset.0.set.${index}.starty-14`,
        })
        annotations.update('tooltip-image', {
            url: congestionImageUrlList[absLevel[index]],
            x: `$dataset.0.set.${index}.x+${timeLabel.length}+7`,
            y: `$dataset.0.set.${index}.starty-27`,
        })
    },
}