Daylogs/Javascript

Highcharts: 라인 차트의 마지막에 값 출력하기

ohgyun 2016. 6. 6. 23:25
발생일: 2016.01.06

키워드: 하이차트, highcharts

문제:
하이차트에서 라인 차트의 마지막에 해당 포인트의 값을 보여주고 싶다.


해결책:

하이차트에서 포인트의 값은 data label 이라 한다.

dataLabels 옵션의 enabled 를 true 로 설정해 표현할 수 있다.

마지막 포인트만 보여주고 싶다면, 아래처럼 마지막 여부만 확인해 넣을 수 있다.

    plotOptions: {
        line: {
            dataLabels: {
                enabled: true,
                align: 'left',
                x: 80,
                formatter: function () {
                    if (this.x === this.series.data.length - 1) {
                        return this.series.name + ': ' + formatNumber(this.y);
                    }
                    return null;
                }
            }
        }
    },
반응형