Pie/Donut/Gauge Label

#latest  #options

원 계열(pie/donut/gauge) 차트의 라벨을 숨기거나 보여주고 커스트마이징(포멧정의) 합니다.


Options

  • extend.[pie/donut/gauge].label.show

  • extend.[pie/donut/gauge].label.format

    extend.[pie/donut/gauge].label.format = function(value, ratio, id) { value.toFixed(2) + "%"; }

Example

Code

//pie
var chart1 = sb.chart.render("#chartWrap1", {
    data : {
        type: "pie",
        columns: [
            ["2015",65.26],
            ["2016",12.74],
            ["2017",22]
        ]
    }
});
//donut
var chart2 = sb.chart.render("#chartWrap2", {
    data : {
        type: "donut",
        columns: [
            ["2015",65.26],
            ["2016",12.74],
            ["2017",22]
        ]
    }
}); 
//guage
var chart3 = sb.chart.render("#chartWrap3", {
    data : {
        type: "gauge",
        columns: [
            ["2015",65.26]
        ]
    }
}); 

// hidden/show
document.getElementById("chkShow").onchange = function() {
    //pie
    chart1.extend({
        pie: {
            label: {
                show:this.checked
            }
        }
    }).render();
    //donut
    chart2.extend({
        donut: {
            label: {
                show:this.checked
            }
        }
    }).render();
    //gauge
    chart3.extend({
        gauge: {
            label: {
                show:this.checked
            }
        }
    }).render();
};
// format
document.getElementById("chkFormat").onchange = function() {

    if(this.checked) {
        //apply format
        var func = function(value, ratio, id) {
            return value.toFixed(2) + "%";
        };
        document.getElementById("chkShow").checked = true;
        //pie
        chart1.extend({
            pie: {
                label: {
                    show: true,
                    format: func
                }
            }
        }).render();
        //donut
        chart2.extend({
            donut: {
                label: {
                    show: true,
                    format: func
                }
            }
        }).render();
        //guage
        chart3.extend({
            gauge: {
                label: {
                    show: true,
                    format: func
                }
            }
        }).render();
    } else {
        //remove format
        delete chart1.extend().pie.label.format;
        delete chart2.extend().donut.label.format;
        delete chart3.extend().gauge.label.format;
        chart1.render();
        chart2.render();
        chart3.render();
    }
};