jui.define("chart.brush.fullgauge", [ "util.math" ], function(math) { /** * @class chart.brush.fullgauge * @extends chart.brush.donut */ var FullGaugeBrush = function() { var group, w, centerX, centerY, outerRadius, innerRadius, textScale; this.createText = function(value, index, centerX, centerY, textScale) { var g = this.svg.group().translate(centerX, centerY), size = this.chart.theme("gaugeFontSize"); g.append(this.chart.text({ "text-anchor" : "middle", "font-size" : size, "font-weight" : this.chart.theme("gaugeFontWeight"), "fill" : this.color(index), y: size / 3 }, this.format(value, index)).scale(textScale)); return g; } this.createTitle = function(title, index, centerX, centerY, dx, dy, textScale) { var g = this.svg.group().translate(centerX + dx, centerY + dy), anchor = (dx == 0) ? "middle" : ((dx < 0) ? "end" : "start"), size = this.chart.theme("gaugeTitleFontSize"); g.append(this.chart.text({ "text-anchor" : anchor, "font-size" : size, "font-weight" : this.chart.theme("gaugeTitleFontWeight"), fill : this.chart.theme("gaugeTitleFontColor"), y: size / 3 }, title).scale(textScale)); return g; } this.drawUnit = function(index, data) { var obj = this.axis.c(index), value = this.getValue(data, "value", 0), title = this.getValue(data, "title"), max = this.getValue(data, "max", 100), min = this.getValue(data, "min", 0); 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; innerRadius = outerRadius - this.brush.size; textScale = math.scaleValue(w, 40, 400, 1, 1.5); // 심볼 타입에 따라 여백 각도 설정 var paddingAngle = (this.brush.symbol == "butt") ? this.chart.theme("gaugePaddingAngle") : 0; group.append(this.drawDonut(centerX, centerY, innerRadius, outerRadius, startAngle + currentAngle + paddingAngle, endAngle - currentAngle - paddingAngle*2, { stroke: this.chart.theme("gaugeBackgroundColor"), fill: "transparent" })); group.append(this.drawDonut(centerX, centerY, innerRadius, outerRadius, startAngle, currentAngle, { stroke: this.color(index), "stroke-linecap": this.brush.symbol, fill: "transparent" })); if(this.brush.showText) { group.append(this.createText(value, index, centerX, centerY - (outerRadius * 0.1), textScale)); } if(title != "") { group.append(this.createTitle(title, index, centerX, centerY - (outerRadius * 0.1), this.brush.titleX, this.brush.titleY, textScale)); } return group; } this.draw = function() { group = this.chart.svg.group(); this.eachData(function(data, i) { this.drawUnit(i, data); }); return group; } } FullGaugeBrush.setup = function() { return { symbol: "butt", /** @cfg {Number} [size=30] Determines the stroke width of a gauge. */ size: 60, /** @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, /** @cfg {Boolean} [showText=true] */ showText: true, /** @cfg {Number} [titleX=0] */ titleX: 0, /** @cfg {Number} [titleY=0] */ titleY: 0, /** @cfg {Function} [format=null] */ format: null }; } return FullGaugeBrush; }, "chart.brush.donut");