chart升级code review

1. Chart升级
Code Review I
- 通用部分
梅安待 赵庶
2012/02/20

2. 两大类图表
基于坐标图表
 折线图
 区域图
 柱状图/堆叠图
 散点图
独立图表
 饼图/环状图
 雷达图
 气泡图
 仪表盘图
 关系图

3. 总体逻辑/流程
自定义区 数据object 图表Chart 自定义元素Custom Item
图形Graph 默认元素Item
Base库
object.data[i] object.data[i].itemStyles

4. 基本数据格式举例
var obj:Object = {
"config":{ //
"width":420, // label
"height":200, //
"x":80,
"y":80
},
"xAxis":[ //
// xAxis style
,
// xAxis style
],
"yAxis":[ //
// yAxis style, palcement = "left"
,
// yAxis style, palcement = "right"
],
"legend":{ //
// legend
},
"tip":{ //
// tip
},
"data":[ //
// Graph
]
};
var chart:Chart = new Chart(obj);

5. 类内部的实现
// getter/setter
public function get axisLine():Object {
return _styles["axisLine"];
}
public function set axisLine(value:Object):void {
for (var key:String in value) {
_styles["axisLine"][key] = value[key];
}
invalidate(INVALID_TYPE_SHOW_AXIS_LINE);
}
/**
*
* @param key [String]
* @param value
*/
override public function setStyle(key:String, value:*):void {
switch(key){
case "axisLine":
this[key] = value;
break;
}
}
/**
*
*/
override protected function initStyle():void {
_styles["axisLine"] = { //
"show": true, //
"lineStyle": {"color": 0x888888, "thickness":2, "alpha":1} //
};
}
www.themegallery.com Company Logo

6. //setter
axis.axisLine = {
"show": true, //
"lineStyle": {"color": 0x888888, "thickness":2, "alpha":1} //
};
//setStyle
var object:Object = {
"show": true, //
"lineStyle": {"color": 0x888888, "thickness":2, "alpha":1} //
};
axis.setStyle(axisLine, object);
//setStyles
var object:Object = {
axisLine:{
"show": true, //
"lineStyle": {"color": 0x888888, "thickness":2, "alpha":1} //
}
};
axis.setStyles(object);
www.themegallery.com Company Logo

7. 坐标基类
override protected function initStyle():void {
_styles["name"] = ""; // ( )
_styles["unit"] = ""; //
_styles["placement"] = GridPlacement.BOTTOM; // top/bottom/left/right bottom
_styles["autoLabel"] = 1; // 0 1 1
_styles["axisLabelTemplate"] = ""; //
_styles["showLastSplitLine"] = true; //
_styles["showFirstAxisLabel"] = true; //
_styles["axisLine"] = { //
"show": true, //
"lineStyle": {"color": 0x888888, "thickness":2, "alpha":1} //
};
_styles["splitLine"] = { //
"show": true, //
"lineStyle": {"color": 0xdddddd, "thickness":1, "alpha":1} //
};
_styles["splitArea"] = {
"show": false, //
"areaStyle":{} //
};
_styles["axisTick"] = { //
"show": false, //
"length": 4, //
"lineStyle":{"color": 0x888888,"thickness":1, "alpha":1} //
};
_styles["axisLabel"] = { //
"show":true, // true
"labels":[], // label
"multiline":false, // false
"padding":4, // 2
"textStyle":{} // , text css style
};
}

8. 具体坐标
override protected function initStyle():void {
super.initStyle();
_styles["data"] = [];// label
_styles["padding"] = 0;//
_styles["negativePadding"] = 0;//
}
override protected function initStyle():void {
super.initStyle();
_styles["autoLabel"] = 0;// 0 1 1
_styles["assignedMaxValue"];//
_styles["assignedMinValue"];//
_styles["rawMaxValue"] = 0;//
_styles["rawMinValue"] = 0;//
_styles["gapOfMax"] = 0;//
_styles["gapOfMin"] = 0;//
_styles["splitNumber"] = 5;//
_styles["axisLabelPower"] = 0;// 10
_styles["timeLabelTemplate"] = "";//
_styles["categoryGridPlacement"] = GridPlacement.BOTTOM;//
}

9. Tip提示
基于SmartTip
可以设置对单个Item
可以设置对单个类目点
允许设置文本样式
{
"round":3, //
"backgroundColor":0x0,
"backgroundAlpha":0.7,
"type":"single", // item item:single/multiple
"textStyle" : {
"fontFamily" : "Arial",
"color" : "#ffffff"
}
}

10. Legend图例
override protected function initStyle():void {
_styles["backGroundStyle"] = {//
"show": false,
"areaStyle": {"fillColor": 0,"fillAlpha":0.2, "lineColor":0, "lineThickness":1, "lineAlpha":0.5}
};
_styles["direction"] = LegendDirection.HORIZONTAL;//
_styles["itemHorizontalGap"] = 20;//item
_styles["itemVerticalGap"] = 2;//item
_styles["xPadding"] = 10;//Legend , item / item
_styles["yPadding"] = 10;//Legend , item / item
_styles["itemRenderer"] = "baidu.dv.legend.LegendItem";//item
_styles["itemStyles"] = {};// itemRenderer
_styles["data"] = [];//
}

11. 通用Style
LineStyle
{
"color":"#FF0000", //
"thickness":1, //
"alpha":1 //
}
AreaStyle
{
"lineColor":"#FF0000", //
"lineThickness":1, //
"lineAlpha":1, //
"fillColor":"#FF0000", //
"fillAlpha":1 //
}
TextStyle
{
"color":"#FF0000", //
"fontFamily":"Arial", //
"fontSize":12, //
"fontStyle":"italic", //
"fontWeight":"bold", //
"leading":2, //
"letterSpacing":0, //
"textAlign":"left", // : left center right justify
"textDecoration":"underline", //
"textIndent":6 //
}

12. Style设置方式
AreaStyle
var normalStyle:Object = {
"size":36,
"areaStyle":{
"lineThickness":2,
"lineColor":0xFFFFFF,
"lineAlpha":0,
"fillColor":0xFFFFFF,
"fillAlpha":1
}
};
var areaStyle:AreaStyle = new AreaStyle(normalStyle.areaStyle);
var gp:Graphics = this.graphics;
gp.lineStyle(areaStyle.lineThickness, areaStyle.lineColor, areaStyle.lineAlpha);
gp.beginFill(areaStyle.fillColor, areaStyle.fillAlpha);
TextStyle
var labelText:String = " "; //
var textStyle:Object = {"color":"#FF0000”, "fontFamily":"Arial"}; //
var styleSheet:StyleSheet = new StyleSheet(); //StyleSheet
var label:TextField = new TextField(); //
labelText = "<label>" + labelText + "</label>"”; // StyleName
styleSheet.setStyle("label", textStyle); // Style
label.styleSheet = styleSheet; // textfield stylesheet
label.htmlText = labelText; //