基于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的画圆方式无法实现。所以首先绘画出扇形区域。代码如下：

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

??

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