티스토리 뷰

발생일: 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;
            }
        }


참고:
반응형
댓글
공지사항