基于Flex的简单仪表盘制作

 

仪表盘效果图：

 

JSON:

{
    "title": {
        "text": "绩效目标执行规划表",
        "fontsize": "20",
        "fontColor":"Black"
    },
    "elements": [
        {
            "color": "0x9933CC",
            "text": "30",
            "value":30
        },
        {
            "color": "0xCC3399",
            "text": "150",
            "value":120
        },
        {
            "color": "0x80a033",
            "text": "200",
            "value":50
        }
    ],
    "min":"0",
    "base":"20",
    "target": "100",
    "value":100
}

 

实现思路：

•  仪表盘为半圆形，每个数据区间颜色不同，使用flex的画圆方式无法实现。所以首先绘画出扇形区域。代码如下：

		/**
		 * 绘制扇形
		 * mc:扇形所在影片剪辑的名字
		 * x:扇形原点的横坐标
		 * y:扇形原点的横坐标
		 * r:扇形的半径
		 * angle:扇形的角度
		 * startForm:起始角度
		 * color:扇形的颜色
		 * 
		 */
		public static function DrawSector(mc:MovieClip,x:Number=200,y:Number=200,r:Number=100,angle:Number=27,startFrom:Number=270,color:Number=0xff0000, alpha:Number=1.0):void {
			mc.graphics.beginFill(color,50);
			mc.graphics.lineStyle(0,0x000000,alpha);
			mc.graphics.moveTo(x,y);
			angle=(Math.abs(angle)>360)?360:angle;
			var n:Number=Math.ceil(Math.abs(angle)/45);
			var angleA:Number=angle/n;
			angleA=angleA*Math.PI/180;
			startFrom=startFrom*Math.PI/180;
			mc.graphics.lineTo(x+r*Math.cos(startFrom),y+r*Math.sin(startFrom));
			for(var i:int=1; i<=n; i++) {
				startFrom+=angleA;
				var angleMid:Number=startFrom-angleA/2;
				var bx:Number=x+r/Math.cos(angleA/2)*Math.cos(angleMid);
				var by:Number=y+r/Math.cos(angleA/2)*Math.sin(angleMid);
				var cx:Number=x+r*Math.cos(startFrom);
				var cy:Number=y+r*Math.sin(startFrom);
				mc.graphics.curveTo(bx,by,cx,cy);
			}
			if (angle!=360) {
				mc.graphics.lineTo(x,y);
			}
			mc.graphics.endFill();
		}

 

注：以上部分为Google内容。

 

• 根据数据总和评分为180份，算出角度。绘制表盘。中间白色部分画出一个圆覆盖即可。源码如下：

public static function DrawCircle(mc:MovieClip,x:Number=200,y:Number=200,r:Number=100, alpha:Number=50, color:Number=0xff0000):void{
	mc.graphics.beginFill(color, alpha);
	mc.graphics.drawCircle(x, y, r);
	mc.graphics.endFill();
}

•  指针只需要根据目标值，转化角度即可。

var rotate:Rotate = new Rotate();
rotate.target = indicator;
rotate.angleFrom = 开始角度;
rotate.angleTo = 目标角度;
rotate.originX = 选转中心点坐标;
rotate.originY = 选转中心点坐标;
rotate.play();

  

 至此所有技术点准备完毕。