Gauge Options

#latest  #options

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


Options

단위
  • extend.gauge.units

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

Min
  • extend.gauge.min.show

  • extend.gauge.min.format

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

  • extend.gauge.min.value

    최솟값을 지정합니다.

Max
  • extend.gauge.max.show

  • extend.gauge.max.format

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

  • extend.gauge.max.value

    최댓값을 지정합니다.

Example

Code

var chart = sb.chart.render("#chartWrap", {
	data: {
		type: "gauge",
		columns: [
			["2015",65.26]
		]
	}
});
// 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;