Data Labels

#latest  #options

값에 대한 라벨을 보이거나 숨기고 라벨 문자열의 커스터마이징(포맷)이 가능합니다.
원 계열(원, 도넛, 게이지) 차트의 라벨은 해당되지 않습니다. 원 계열 차트는 각각 extend.pie.label, extend.donut.label, extend.gauge.label옵션을 참조하세요


Options

위치조정
  • data.labels.position.x

    라벨을 X축 방향으로 해당 값만큼 이동합니다. 양수일 경우는 우측으로 음수일 경우는 좌측으로 이동합니다.

  • data.labels.position.y

    라벨을 Y축 방향으로 해당 값만큼 이동합니다. 양수일 경우는 아래로 음수일 경우는 위로 이동합니다.

포맷
  • data.labels.format

    data.labels.format = function(value, id, index) { return value.toFixed(3); }

Example

사용 가능 차트 :

Code

var chart = sb.chart.render("#chartWrap", {
	data: {
		type: "bar",
		columns: [
			["2016",0.71,2.14,3.18,1.84,0.79,0.35,0.28,0.44,0.79,0.84,1.33],
			["2017",2.8,1.45,2.35,0.29,0.42,2.0,5.12,1.12,2.3,2.67,1.4]
		],
		labels: {
			format: function(value, id, index) {
				return value.toFixed(3);
			},
			position: {
				x: 0,
				y: -10
			}
		}
	}
});
// format
document.getElementById("chkFormat").onchange = function() {
	if(this.checked) {
		chart.data({
			labels: {
				format: function(value, id, index) {
					return value.toFixed(3);
				},
				position: {
					x: document.getElementById("txtX").value,
					y: document.getElementById("txtY").value
				}
			}
		}).render();
	} else {
		delete chart.data().labels; // delete labels
		chart.render();
	}
};
// x
document.getElementById("txtX").onchange = function() {
	document.getElementById("chkFormat").onchange();
};
// y
document.getElementById("txtY").onchange = function() {
	document.getElementById("chkFormat").onchange();
};