draw lines on ColumnChart

原文 http://blog.csdn.net/lixuekun820/article/details/5485042

Summary:

Adobe 的 Flex Chart提供了很强大的功能，通过简单的设置就可以实现一些较复杂的效果。比如通过ColumnSet将多个柱状图以overlaid形式显示，并添加条线图。但思想是无止境的，老外要求我们在柱状图上有斜线的效果等。

Requirement:

ColumnChart 的能够显示线条，不同的柱状图显示不同的倾斜度、粗细及颜色。

Solution:

自定义ColumnSeries的itemRenderer. 

定义 LinesRenderer.as 如下：

package 

{

    import flash.display.Graphics;

    import flash.geom.Point;

    import mx.charts.renderers.BoxItemRenderer;

    public class LinesRenderer extends BoxItemRenderer

    {

    	/**

    	* properties:

    	* lineGap is the gap between in lines

    	* lineAngle is line's angle    	 

    	* */

        public var lineGap : Number=4;

        public var lineAngle : Number = 75;

        /**

        * style settings:

        * linethickness

        * lineColor

        * lineAlpha

        * */        

        public var lineThickness : Number = 1;

        public var lineColor : uint = 0x000000;

        public var lineAlpha : Number = 1;

        /**

        * Private properties:

        * xIncreace: x add value

        * yIncreace: y add value

        * maxIncreace: the max value of increace

        * 

        * */

        private var xIncreace : Number;

        private var yIncreace : Number;

        private var maxIncreace : Number;        

        private static const RADIAN_UINT : Number = Math.PI / 180;        

        private var startPoint : Point = new Point(0, 0);

        private var endPoint : Point = new Point(0, 0);

        private var currentPoint : Point = new Point(0, 0);

        public function LinesRenderer()

        {

            super();

        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

        {

            super.updateDisplayList(unscaledWidth, unscaledHeight);

            if (this.height == 0 || this.width == 0)

            {

                return;

            }

var g:Graphics=graphics;

            g.lineStyle(lineThickness, lineColor, lineAlpha);

            drawShadeLine(g);

            g.endFill();

        }

        /**

        * draw lines function

        **/

        private function drawShadeLine(g : Graphics) : void

        {

        	var absHeight : Number = Math.abs(height);

        	var absWidth : Number = Math.abs(width);

        	currentPoint.x = 0;

        	currentPoint.y = 0;

        	if(lineAngle == 0)

        	{

        	if(height < 0)

        	{

        	currentPoint.y = - absHeight;

        	}

        	for(var i : int = 1; i * lineGap < absHeight; i++)

        	{

        	g.moveTo(currentPoint.x, currentPoint.y + i * lineGap);

        	g.lineTo(currentPoint.x + absWidth, currentPoint.y + i * lineGap);

        	}

        	}

        	else if(lineAngle == 90)

        	{

        	if(height < 0)

        	{

        	currentPoint.y = - absHeight;    

        	}

        	for(var t : int = 1; t * lineGap < absHeight; t++)

        	{

        	g.moveTo(currentPoint.x + t * lineGap, currentPoint.y);

        	g.lineTo(currentPoint.x + t * lineGap, currentPoint.y + absHeight);

        	}

        	}

        	else if(lineAngle > 0 && lineAngle < 90)

        	{

        	if(height < 0)

        	{

        	currentPoint.y = - absHeight;

        	}

        	xIncreace = lineGap / Math.cos(lineAngle * RADIAN_UINT);

           yIncreace = lineGap / Math.sin(lineAngle * RADIAN_UINT);

           maxIncreace = Math.max(absHeight + absWidth/Math.tan(lineAngle * RADIAN_UINT)

           	,absWidth + absHeight * Math.tan(lineAngle * RADIAN_UINT));

        	for (var j:int = 1; (j * xIncreace < maxIncreace || j * yIncreace < maxIncreace); j++)

           {

           	startPoint.y = currentPoint.y + j * yIncreace;

if (startPoint.y > currentPoint.y + absHeight)

{

startPoint.x = Math.min((startPoint.y - currentPoint.y - absHeight) * Math.tan(lineAngle * RADIAN_UINT), 

currentPoint.x + absWidth);

startPoint.y = currentPoint.y + absHeight;

} else 

{

startPoint.x = currentPoint.x;

}          

endPoint.x  = currentPoint.x + j * xIncreace;

if (endPoint.x > currentPoint.x + absWidth)

{

endPoint.y = Math.min(currentPoint.y + (endPoint.x - currentPoint.x - absWidth)/Math.tan(lineAngle * RADIAN_UINT), 

currentPoint.y + absHeight);

endPoint.x = currentPoint.x + absWidth;

} else 

{

endPoint.y = currentPoint.y;

}

               g.moveTo(startPoint.x, startPoint.y);

               g.lineTo(endPoint.x, endPoint.y);

           }

        	}

        	else if(lineAngle > 90 && lineAngle < 180)

        	{

        	if(height > 0)

        	{

        	currentPoint.y = height;

        	}

        	xIncreace = lineGap / Math.sin((180 - lineAngle) * RADIAN_UINT);

           yIncreace = lineGap / Math.cos((180 - lineAngle) * RADIAN_UINT);

           maxIncreace = Math.max(absHeight + absWidth * Math.tan((180 - lineAngle) * RADIAN_UINT)

           	,absWidth + absHeight / Math.tan((180 - lineAngle) * RADIAN_UINT));

        	for (var k:int = 1; (k * xIncreace < maxIncreace || k * yIncreace < maxIncreace); k++)

           {

           	startPoint.y = currentPoint.y - k * yIncreace;

if (startPoint.y < currentPoint.y - absHeight)

{

startPoint.x = Math.min(Math.abs(currentPoint.y - absHeight - startPoint.y) / Math.tan((180 - lineAngle) * RADIAN_UINT), 

currentPoint.x + absWidth);

startPoint.y = currentPoint.y - absHeight;

} else 

{

startPoint.x = currentPoint.x;

}          

endPoint.x  = currentPoint.x + k * xIncreace;

if (endPoint.x > currentPoint.x + absWidth)

{

endPoint.y = Math.max(currentPoint.y - ((endPoint.x - currentPoint.x - absWidth) * Math.tan((180 - lineAngle) * RADIAN_UINT)), 

currentPoint.y - absHeight);

endPoint.x = currentPoint.x + absWidth;

} else 

{

endPoint.y = currentPoint.y;

}

               g.moveTo(startPoint.x, startPoint.y);

               g.lineTo(endPoint.x, endPoint.y);

           }

        	}

        }

    }

}

Example: 创建一个App，使ColumnSeries 的ItemRender 为linesRender

ColumnChartApp.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">

<mx:Script>

    import mx.collections.ArrayCollection;

    [Bindable]

    public var dataCollection:ArrayCollection = new ArrayCollection([

        {Month: "Jan", Income: 2000, AverageIncome:1620 },

        {Month: "Feb", Income: 600, AverageIncome:1620},

        {Month: "Mar", Income: 1500,AverageIncome:1620},

       {Month: "Apr", Income: 2500, AverageIncome:1620},

       {Month: "May", Income: 1500, AverageIncome:1620}]);       

    </mx:Script>

    <mx:Panel>

        <mx:ColumnChart id="myChart" dataProvider="{dataCollection}"

        	 showDataTips="true" type="overlaid">

            <mx:horizontalAxis>

                <mx:CategoryAxis dataProvider="{dataCollection}" 

                	 categoryField="Month"/>

            </mx:horizontalAxis>

            <mx:series>                

                <mx:ColumnSeries  xField="Month" yField="AverageIncome"  displayName="Average"

                	>

                	<mx:itemRenderer>

                	<mx:Component>

                	<local:LinesRenderer lineAngle="45" lineGap="5"  lineColor="0xffff00"/>

                	</mx:Component>

                	</mx:itemRenderer>

                </mx:ColumnSeries>

            </mx:series>

        </mx:ColumnChart>

    </mx:Panel>

</mx:Application>

注：代码可以独立运行，LinesRenderer.as 中的drawShadeLine()算法不是很理想，有待于改进。