Commits

Anonymous committed 52dd37e

Pie labels on slices

labelOnSlice: true
labelDistance: ratio of radius to center label on.

Comments (0)

Files changed (2)

examples/pieTest.html

     $.jqplot.config.enablePlugins = true;
 
     plot1 = $.jqplot('pie1', [[['a',25],['b',14],['c',7]]], {
-      seriesDefaults:{renderer:$.jqplot.PieRenderer, trendline:{show:true}},
+    seriesDefaults:{rendererOptions: {labelOnSlice: true}, renderer:$.jqplot.PieRenderer, trendline:{show:true}},
       legend:{show:true}      
     });
 
     <div id="pie3" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
     <div id="pie4" style="margin-top:20px; margin-left:20px; width:200px; height:200px;"></div>
   </body>
-</html>
+</html>

src/plugins/jqplot.pieRenderer.js

         // number of strokes to apply to the shadow, 
         // each stroke offset shadowOffset from the last.
         this.shadowDepth = 5;
+        this.labelFormatter = function(d) {
+            return "<b>"+d[0]+"</b><br/> "+d[2];
+        },
+        this.labelDistance = 0.75;
         this.tickRenderer = $.jqplot.PieTickRenderer;
         $.extend(true, this, options);
         if (this.diameter != null) {
         
         for (var i=0; i<stack.length; i++) {
             td[i][1] = stack[i] * fact;
+            td[i][2] = data[i][1];
         }
         return td;
     };
         this._diameter = this.diameter  || d - this.sliceMargin;
         // this.diameter -= this.sliceMargin;
         var r = this._diameter/2;
+
+        var origin = {
+            x: (cw - trans * offx)/2 + trans*offx, 
+            y: (ch - trans * offy)/2 + trans*offy 
+        };
         ctx.save();
-        ctx.translate((cw - trans * offx)/2 + trans * offx, (ch - trans*offy)/2 + trans * offy);
+        ctx.translate(origin.x, origin.y);
         
         if (this.shadow) {
             var shadowColor = 'rgba(0,0,0,'+this.shadowAlpha+')';
             }
             
         }
+        var hr = this.labelDistance * r;
+        origin.x += ctx.canvas.offsetLeft;
+        origin.y += ctx.canvas.offsetTop;
+        console.log(this); 
+        console.log(ctx);
         for (var i=0; i<gd.length; i++) {
             var ang1 = (i == 0) ? 0 : gd[i-1][1];
             this.renderer.drawSlice.call (this, ctx, ang1, gd[i][1], colorGenerator.next());
+            if(this.labelOnSlice) {
+                var l = $("<div class='jqplot-axis' style='line-height: 100%;position: absolute;text-align: center;'>"+this.labelFormatter(gd[i])+"</div>").insertAfter(ctx.canvas)
+                var mid_ang = ang1 + (gd[i][1]-ang1)/2
+                var mid_x = Math.cos(mid_ang) * hr + origin.x - l.width()/2;
+                var mid_y = Math.sin(mid_ang) * hr + origin.y - l.height()/2;
+                l.css({left: mid_x+"px", top: mid_y+"px"});
+
+            }
         }
         
         ctx.restore();        
     
 })(jQuery);
     
-    
+