Draw a slice of pie for a chart using Flex - test code and screenshot attached

Question

In a Flex 4.7 web application I'm trying to draw a simple pie chart in red and green colors.

So I have drawn a _red circle and then right above it I have drawn a _green circle:

And I was hoping to set an angle on the latter - to reduce it to a "slice of pie", but can't find any method or property for that in spark.primitives.Ellipse

Does anybody please have a good suggestion here?

My complete and simple test code is below:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               applicationComplete="init()">

    <fx:Script>
        <![CDATA[
            private function init():void {
                // XXX how to set _green angle?
            }
        ]]>
    </fx:Script>

    <s:Ellipse id="_red" height="60" width="60" x="110" y="90">
        <s:fill>
            <s:SolidColor color="#CC0000" />
        </s:fill>
    </s:Ellipse>

    <s:Ellipse id="_green" height="60" width="60" x="110" y="90">
        <s:fill>
            <s:SolidColor color="#66CC66" />
        </s:fill>
    </s:Ellipse>

</s:Application>

Because it is too heavyweight, I don't want to use mx.charts.PieChart, since the chart will be shown in an item renderer: Calculate a quotient in one table and store it in another table

Also, I've searched the net and all code examples drawing wedges call curveTo multiple times, but I wonder if a simple mask to partially cover the _green circle could be used instead?

Answer 1

One approach would be to draw wedges to a <s:SpriteVisualElement> or use fill as a mask using nl.funkymonkey.drawing.DrawingShapes:

Ultimately ending up as:

Example MXML implementation:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            public function drawWedge(target:Graphics, x:Number, y:Number, radius:Number, arc:Number, startAngle:Number=0, yRadius:Number=0):void
            {
                if (yRadius == 0)
                    yRadius = radius;

                target.moveTo(x, y);

                var segAngle:Number, theta:Number, angle:Number, angleMid:Number, segs:Number, ax:Number, ay:Number, bx:Number, by:Number, cx:Number, cy:Number;

                if (Math.abs(arc) > 360)
                    arc = 360;

                segs = Math.ceil(Math.abs(arc) / 45);
                segAngle = arc / segs;
                theta = -(segAngle / 180) * Math.PI;
                angle = -(startAngle / 180) * Math.PI;
                if (segs > 0)
                {
                    ax = x + Math.cos(startAngle / 180 * Math.PI) * radius;
                    ay = y + Math.sin(-startAngle / 180 * Math.PI) * yRadius;
                    target.lineTo(ax, ay);
                    for (var i:int = 0; i < segs; ++i)
                    {
                        angle += theta;
                        angleMid = angle - (theta / 2);
                        bx = x + Math.cos(angle) * radius;
                        by = y + Math.sin(angle) * yRadius;
                        cx = x + Math.cos(angleMid) * (radius / Math.cos(theta / 2));
                        cy = y + Math.sin(angleMid) * (yRadius / Math.cos(theta / 2));
                        target.curveTo(cx, cy, bx, by);
                    }
                    target.lineTo(x, y);
                }
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                super.updateDisplayList(unscaledWidth, unscaledHeight);

                var g:Graphics = _green.graphics;
                g.clear();
                g.beginFill(0x66CC66);
                drawWedge(g, 30, 30, 30, 245);
                g.endFill();
            }
        ]]>
    </fx:Script>

    <s:Ellipse id="_red"
               height="60"
               width="60"
               x="110"
               y="90">
        <s:fill>
            <mx:SolidColor color="0xCC0000" />
        </s:fill>
    </s:Ellipse>

    <s:SpriteVisualElement id="_green"
                           height="60"
                           width="60"
                           x="110"
                           y="90" />

</s:Application>

Even leaner is to simply perform all drawing via low-level graphics operations instead of using the Spark ellipse primitive.