맨위로가기
 

SBCHART

닫기

Gauge Options

#latest  #options

게이지(gauge) 차트 고유 옵션입니다.

Options

width
  • extend.gauge.width

    차트의 폭을 일정한 값으로 설정합니다.

단위
  • extend.gauge.units

    차트의 단위 영역에 해당 문자열을 표현합니다.

Min
  • extend.gauge.min.show = true/false

  • extend.gauge.min.format

    extend.gauge.min.format = function(val) { return val.toFixed(2); }

  • extend.gauge.min.value

    최솟값을 지정합니다.

Max
  • extend.gauge.max.show = true/false

  • extend.gauge.max.format

    extend.gauge.max.format = function(val) { return val.toFixed(2); }

  • extend.gauge.max.value

    최댓값을 지정합니다.

Title
  • extend.gauge.title

    내부 원 안에 타이틀을 지정합니다.

Example

Code

var chart = sb.chart.render("#chartWrap", {
    data: {
        type: "gauge",
        columns: [
            ["2015",65.26]
        ]
    }
});
// width
document.getElementById("txtWidth").onchange = function() {
    chart.extend({
        gauge: {
            width: this.value
        }
    }).render();
};
// units
document.getElementById("txtUnits").onchange = function() {
    chart.extend({
        gauge: {
            units: this.value
        }
    }).render();
};
// min
function fnMin() {
    var conf = {
        min: {
            show: document.getElementById("txtMinShow").checked,
            format: document.getElementById("txtMinFormat").checked? function(val){ return parseFloat(val).toFixed(2);}: undefined,
            value: document.getElementById("txtMinValue").value
        }
    }
    chart.extend({ gauge: conf }).render();
}
// max
function fnMax() {
    var conf = {
        max: {
            show: document.getElementById("txtMaxShow").checked,
            format: document.getElementById("txtMaxFormat").checked? function(val){ return parseFloat(val).toFixed(2);}: undefined,
            value: document.getElementById("txtMaxValue").value
        }
    }
    chart.extend({gauge: conf }).render();
}
//events
document.getElementById("txtMinShow").onchange = fnMin;
document.getElementById("txtMinFormat").onchange = fnMin;
document.getElementById("txtMinValue").onchange = fnMin;
document.getElementById("txtMaxShow").onchange = fnMax;
document.getElementById("txtMaxFormat").onchange = fnMax;
document.getElementById("txtMaxValue").onchange = fnMax;