Data Labels

#latest  #options

값에 대한 라벨을 보이거나 숨기고 라벨 문자열의 커스트마이징(포멧)이 가능합니다.
원 계열(원, 도넛) 차트의 라벨은 해당되지 않습니다. 원 계열 차트는 각각 extend.pie.label, extend.donut.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: [
            ["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();
};