Highcharts: legend 에 데이터의 마지막 값 넣기

발생일: 2016.01.06

키워드: highcharts, 하이차트, legend, 범례

문제:

하이차트에서 범례(legend) 옆에 마지막 값을 표시하려고 한다.

해결책:

legend 옵션에서 값을 변경할 수는 있지만,

legend가 출력되는 시점에서는 마지막 데이터를 읽어올 수 없다.

한 틱 딜레이를 주는 방식으로 우회해서 아래처럼 해결할 수 있다.

        // 마지막 값을 포함해 하단에 보여주는 레전드 옵션

        legend: {

            layout: 'horizontal',

            align: 'center',

            borderWidth: 0,

            itemDistance: 50,

            labelFormatter: function () {

                // 레이블이 출력될 때엔 아직 데이터가 렌더링되기 전이다.

                // 레이블 아래에 마지막 데이터의 값을 출력해주기 위해, 딜레이 후에 엘리먼트를 직접 변경한다.

                setTimeout(_.bind(function () {

                    var lastValue = this.data[this.data.length - 1].y;

                    this.legendItem.element.innerHTML = [

                        '<tspan x="21" dy="0">' + this.name + '</tspan>',

                        '<tspan x="21" dy="1.2em">(' + formatNumber(lastValue) + ')</tspan>'

                    ].join('');

                }, this), 25);

                return this.name;

            }

        },

        // 마지막 값을 포함해 우측에 보여주는 레전드 옵션

        legend: {

            y: 30,

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'top',

            borderWidth: 0,

            itemMarginTop: 10,

            itemMarginBottom: 20,

            labelFormatter: function () {

                // 레이블이 출력될 때엔 아직 데이터가 렌더링되기 전이다.

                // 레이블 아래에 마지막 데이터의 값을 출력해주기 위해, 딜레이 후에 엘리먼트를 직접 변경한다.

                setTimeout(_.bind(function () {

                    var lastValue = this.data[this.data.length - 1].y;

                    this.legendItem.element.innerHTML = [

                        '<tspan x="21" dy="0">' + this.name + '</tspan>',

                        '<tspan x="21" dy="1.2em">(' + formatNumber(lastValue) + ')</tspan>'

                    ].join('');

                }, this), 25);

                return this.name;

            }

        }

참고:

http://api.highcharts.com/highcharts#legend