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();
};