Draw Pie
Ns.Chart.pie = function () {
Ns.Chart.chartBase.apply(this, arguments);
this.color = "#0ff11";
this.r = 200;
this.cx = -1;
this.cy = -1;
this.marginX = 10;
this.r2 = 100;
this.marginY = 30;
this.strokeWidth = 5;
this.mode = "annular";
this.draw = function () {
var h = $(this.parent.svgdom).height(),
w = $(this.parent.svgdom).width();
if (this.cx == -1) {
this.cx = (w - (this.r) * 2) / 2 + this.marginX + this.r;
}
if (this.cy == -1) {
this.cy = (h - (this.marginY + this.r) * 2) / 2 + this.marginY + this.r;
}
if (this.svgTitle.enabled) {
if (this.svgTitle.x == -1) {
this.svgTitle.x = (this.r + this.marginX);
}
this.svgTitle.draw();
}
var starAngle = 0;
var total = Ns.Data.Filter.Sum(this.series, function (series) {
if (series.data && !window.isNaN(series.data)) { return series.data; }
if (series.datasource && series.datasource[0]) {
series.data = window.parseFloat(series.datasource[0][series.valueField]);
return series.data;
}
return null;
});
var g = this.svg.draw("g");
for (var i = 0; i < this.series.length; i++) {
var color = this.color;
if (this.color) {
var c = new Ns.SVG.Base.Color(this.color);
c.r = c.r + 15 * i;
c.g = c.g + 15 * i;
c.b = c.b + 15 * i;
color = c.toString();
}
if (!this.series[i].css) { this.series[i].css = {}; }
if (!this.series[i].css.fill) {
this.series[i].css.fill = color;
}
var deg = this.series[i].data / total * 360;
this.series[i].startDeg = starAngle;
this.series[i].endDeg = starAngle + deg;
starAngle = this.series[i].endDeg;
if (this.mode == "annular") {
this._drawAnnular(g, this.series[i], this.series.length, i);
} else {
this._drawPath(g, this.series[i], this.series.length, i);
}
}
}
this._drawPath = function (canvas, series) {
var x0 = this.cx + this.r * Math.cos(series.startDeg * Math.PI / 180);
var y0 = this.cy - this.r * Math.sin(series.startDeg * Math.PI / 180);
var x1 = this.cx + this.r * Math.cos(series.endDeg * Math.PI / 180);
var y1 = this.cy - this.r * Math.sin(series.endDeg * Math.PI / 180);
var g = canvas.draw("path", { d: "M " + this.cx + "," + this.cy + " L " + x0 + "," + y0 + " A " + this.r + "," + this.r + " 0 0,0 " + x1 + "," + y1 + " Z" });
g.css({ "stroke-width": this.strokeWidth, "stroke": "#ffffff" });
if (series.fill) {
g.css({ fill: series.fill });
}
if (series.color) {
g.css({ fill: series.color });
}
if (series.css) {
g.css(series.css);
}
if (series.attr) {
g.attr(series.attr);
}
g.attr({ "ns-chart": "pie", "ns-chart-pie-start": series.startDeg, "ns-chart-pie-end": series.endDeg, "ns-chart-data": series.data, "ns-chart-argument": series.argumentField });
}
this._drawAnnular = function (canvas, series) {
var x0 = this.cx + this.r * Math.cos(series.startDeg * Math.PI / 180);
var y0 = this.cy - this.r * Math.sin(series.startDeg * Math.PI / 180);
var x1 = this.cx + this.r * Math.cos(series.endDeg * Math.PI / 180);
var y1 = this.cy - this.r * Math.sin(series.endDeg * Math.PI / 180);
var x2 = this.cx + this.r2 * Math.cos(series.startDeg * Math.PI / 180);
var y2 = this.cy - this.r2 * Math.sin(series.startDeg * Math.PI / 180);
var x3 = this.cx + this.r2 * Math.cos(series.endDeg * Math.PI / 180);
var y3 = this.cy - this.r2 * Math.sin(series.endDeg * Math.PI / 180);
//var g = canvas.draw("path", { d: "M " + x2 + "," + y2 + " L " + x0 + "," + y0 + " A " + this.r + "," + this.r + " 0 0,0 " + x1 + "," + y1 + " L " + x3 + "," + y3 + " A " + this.r2 + "," + this.r2 + " 0 1,0 "+ x2 + "," + y2 + " " });
var g = canvas.draw("path", {
d: "M " + this.cx + "," + this.cy + " L " + x0 + "," + y0 + " A " + this.r + "," + this.r + " 0 0,0 " + x1 + "," + y1 + " Z"
});
var g2 = canvas.draw("path", {
d: "M " + this.cx + "," + this.cy + " L " + x2 + "," + y2 + " A " + this.r2 + "," + this.r2 + " 0 0,0 " + x3 + "," + y3 + " Z"
});
g2.css({ "fill": "#ffffff" });
g.css({ "stroke-width": this.strokeWidth, "stroke": "#ffffff" });
if (series.fill) {
g.css({ fill: series.fill });
}
if (series.color) {
g.css({ fill: series.color });
}
if (series.css) {
if (series.css["stroke"]) {
g2.css({ "fill": series.css["stroke"] });
}
g.css(series.css);
}
if (series.attr) {
g.attr(series.attr);
}
g.attr({ "ns-chart": "pie", "ns-chart-pie-start": series.startDeg, "ns-chart-pie-end": series.endDeg, "ns-chart-value": series.data, "ns-chart-data": series.data, "ns-chart-argument": series.argumentField });
}
this.initialize = function (exp) {
var p = exp;
if (Ns.Judge.isStr(exp)) {
p = $(exp)[0];
}
if (p.nodeName.toLowerCase() == "svg") {
this.canvas = $(p).parent();
this.svg = new Ns.SVG.base(p);
this.parent = new Ns.SVG.base(this.canvas);
} else {
this.canvas = $(p)[0];
this.parent = new Ns.SVG.base(this.canvas);
var chl = $(this.canvas).children("svg");
if (chl.length <= 0) {
this.svg = Ns.SVG.Base.createBC("svg");
this.svg.appendTo($(this.canvas));
} else {
this.svg = new Ns.SVG.base(chl[0]);
this.svg.guid = $(this);
this.id = $(this).attr("id");
}
}
this.hovering =
Ns.Event.EventTarget.register("hovering", null, this, this.svg ? this.svg.svgdom : null);
this.drawing =
Ns.Event.EventTarget.register("drawing", null, this, null);
this.drawed =
Ns.Event.EventTarget.register("drawed", null, this, null);
this.initialized.fire(arguments);
}
this._init = function () {
this.initialized.addEvent(function (e, args) {
this.series = Ns.Chart.Series(this.datasource, this.series);
if (this.title) {
this.svgTitle = new Ns.Chart.title();
this.svgTitle.initialize(this.svg, this.canvas);
this.svgTitle.text = this.title;
this.svgTitle.x = -1;
this.svgTitle.y = 20;
this.svgTitle.attr = { "ns-chart-title": this.title };
}
});
}
this._init.apply(this, arguments);
}
Ns.Extend.pro(Ns.Chart.pie, Ns.Chart.chartBase);
