/** * Pie * * Formats the pies labels. * @param {Object} slice - Slice object * @return {String} Formatted pie label string */ (function () { var _ = Flotr._; Flotr.defaultPieLabelFormatter = function (total, value) { return (100 * value / total).toFixed(2)+'%'; }; Flotr.addType('pie', { options: { show: false, // => setting to true will show bars, false will hide lineWidth: 1, // => in pixels fill: true, // => true to fill the area from the line to the x axis, false for (transparent) no fill fillColor: null, // => fill color fillOpacity: 0.6, // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill explode: 6, // => the number of pixels the splices will be far from the center sizeRatio: 0.6, // => the size ratio of the pie relative to the plot startAngle: Math.PI/4, // => the first slice start angle labelFormatter: Flotr.defaultPieLabelFormatter, pie3D: false, // => whether to draw the pie in 3 dimenstions or not (ineffective) pie3DviewAngle: (Math.PI/2 * 0.8), pie3DspliceThickness: 20, epsilon: 0.1 // => how close do you have to get to hit empty slice }, draw : function (options) { // TODO 3D charts what? var data = options.data, context = options.context, canvas = context.canvas, lineWidth = options.lineWidth, shadowSize = options.shadowSize, sizeRatio = options.sizeRatio, height = options.height, width = options.width, explode = options.explode, color = options.color, fill = options.fill, fillStyle = options.fillStyle, radius = Math.min(canvas.width, canvas.height) * sizeRatio / 2, value = data[0][1], html = [], vScale = 1,//Math.cos(series.pie.viewAngle); measure = Math.PI * 2 * value / this.total, startAngle = this.startAngle || (2 * Math.PI * options.startAngle), // TODO: this initial startAngle is already in radians (fixing will be test-unstable) endAngle = startAngle + measure, bisection = startAngle + measure / 2, label = options.labelFormatter(this.total, value), //plotTickness = Math.sin(series.pie.viewAngle)*series.pie.spliceThickness / vScale; explodeCoeff = explode + radius + 4, distX = Math.cos(bisection) * explodeCoeff, distY = Math.sin(bisection) * explodeCoeff, textAlign = distX < 0 ? 'right' : 'left', textBaseline = distY > 0 ? 'top' : 'bottom', style, x, y; context.save(); context.translate(width / 2, height / 2); context.scale(1, vScale); x = Math.cos(bisection) * explode; y = Math.sin(bisection) * explode; // Shadows if (shadowSize > 0) { this.plotSlice(x + shadowSize, y + shadowSize, radius, startAngle, endAngle, context); if (fill) { context.fillStyle = 'rgba(0,0,0,0.1)'; context.fill(); } } this.plotSlice(x, y, radius, startAngle, endAngle, context); if (fill) { context.fillStyle = fillStyle; context.fill(); } context.lineWidth = lineWidth; context.strokeStyle = color; context.stroke(); style = { size : options.fontSize * 1.2, color : options.fontColor, weight : 1.5 }; if (label) { if (options.htmlText || !options.textEnabled) { divStyle = 'position:absolute;' + textBaseline + ':' + (height / 2 + (textBaseline === 'top' ? distY : -distY)) + 'px;'; divStyle += textAlign + ':' + (width / 2 + (textAlign === 'right' ? -distX : distX)) + 'px;'; html.push('