Daylogs/Javascript
Highcharts: legend 에 데이터의 마지막 값 넣기
ohgyun
2016. 6. 6. 23:24
발생일: 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;
}
}
참고:
반응형