jui.define("chart.brush.gauge", [ "util.math" ], function(math) { /** * @class chart.brush.gauge * @extends chart.brush.donut */ var GaugeBrush = function() { var self = this; var w, centerX, centerY, outerRadius, innerRadius; function createText(startAngle, endAngle, min, max, value, unit) { var g = self.chart.svg.group({ "class" : "gauge text" }).translate(centerX, centerY); g.append(self.chart.svg.text({ x : 0, y : (self.brush.arrow) ? 70 : 10, "text-anchor" : "middle", "font-size" : "3em", "font-weight" : 1000, "fill" : self.color(0) }, value + "")); if (unit != "") { g.append(self.chart.text({ x : 0, y : 100, "text-anchor" : "middle", "font-size" : "1.5em", "font-weight" : 500, "fill" : self.chart.theme("gaugeFontColor") }, unit)) } // 바깥 지름 부터 그림 var startX = 0; var startY = -outerRadius; // min var obj = math.rotate(startX, startY, math.radian(startAngle)); startX = obj.x; startY = obj.y; g.append(self.chart.text({ x : obj.x + 30, y : obj.y + 20, "text-anchor" : "middle", "fill" : self.chart.theme("gaugeFontColor") }, min + "")); // max // outer arc 에 대한 지점 설정 var obj = math.rotate(startX, startY, math.radian(endAngle)); g.append(self.chart.text({ x : obj.x - 20, y : obj.y + 20, "text-anchor" : "middle", "fill" : self.chart.theme("gaugeFontColor") }, max + "")); return g; } this.drawBefore = function() { } this.drawUnit = function(index, data, group) { var obj = this.axis.c(index), value = this.getValue(data, "value", 0), max = this.getValue(data, "max", 100), min = this.getValue(data, "min", 0), unit = this.getValue(data, "unit"); var startAngle = this.brush.startAngle; var endAngle = this.brush.endAngle; if (endAngle >= 360) { endAngle = 359.99999; } var rate = (value - min) / (max - min), currentAngle = endAngle * rate; if (currentAngle > endAngle) { currentAngle = endAngle; } var width = obj.width, height = obj.height, x = obj.x, y = obj.y; // center w = Math.min(width, height) / 2; centerX = width / 2 + x; centerY = height / 2 + y; outerRadius = w - this.brush.size/2; innerRadius = outerRadius - this.brush.size; group.append(this.drawDonut(centerX, centerY, innerRadius, outerRadius, startAngle + currentAngle, endAngle - currentAngle, { fill : "transparent", stroke : this.chart.theme("gaugeBackgroundColor") })); group.append(this.drawDonut(centerX, centerY, innerRadius, outerRadius, startAngle, currentAngle, { fill : "transparent", stroke : this.color(index) })); // startAngle, endAngle 에 따른 Text 위치를 선정해야함 group.append(createText(startAngle, endAngle, min, max, value, unit)); return group; } this.draw = function() { var group = this.chart.svg.group(); this.eachData(function(data, i) { this.drawUnit(i, data, group); }); return group; } } GaugeBrush.setup = function() { return { /** @cfg {Number} [size=30] Determines the stroke width of a gauge. */ size: 30, /** @cfg {Number} [startAngle=0] Determines the start angle(as start point) of a gauge. */ startAngle: 0, /** @cfg {Number} [endAngle=360] Determines the end angle(as draw point) of a gauge. */ endAngle: 360 }; } return GaugeBrush; }, "chart.brush.donut");