Chart升级Code Review I

- 通用部分

梅安待 赵庶2012/02/20

两大类图表基于坐标图表

折线图 区域图 柱状图 /堆叠图 散点图

独立图表 饼图 /环状图 雷达图 气泡图 仪表盘图 关系图

总体逻辑 /流程

自定义区

Base 库

图表 Chart

图形 Graph 默认元素 Item

自定义元素 Custom Item数据 object

object.data[i] object.data[i].itemStyles

基本数据格式举例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);

www.themegallery.com Company Logo

类内部的实现// 坐标线数据 getter/setterpublic 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

设置数据的方法//setteraxis.axisLine = { "show": true, // 是否显示坐标线 "lineStyle": {"color": 0x888888, "thickness":2, "alpha":1} // 线条样式};

//setStylevar object:Object = { "show": true, // 是否显示坐标线 "lineStyle": {"color": 0x888888, "thickness":2, "alpha":1} // 线条样式};axis.setStyle(axisLine, object);

//setStylesvar object:Object = { axisLine:{ "show": true, // 是否显示坐标线 "lineStyle": {"color": 0x888888, "thickness":2, "alpha":1} // 线条样式 }};axis.setStyles(object);

坐标基类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 };}

具体坐标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;// 数值轴用，配对的类目坐标位置}

Tip提示

{ "round":3, // 圆角，只对默认样式有效 "backgroundColor":0x0, "backgroundAlpha":0.7, "type":"single", // 对 item 还是对多 item:single/multiple "textStyle" : { "fontFamily" : "Arial", "color" : "#ffffff" }}

基于 SmartTip

可以设置对单个 Item

可以设置对单个类目点

允许设置文本样式

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"] = [];// 数据}

通用 StyleLineStyle{ "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 // 缩进}

Style设置方式AreaStylevar 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);

TextStylevar labelText:String = " 星期二 "; // 需要设置的标签var textStyle:Object = {"color":"#FF0000”, "fontFamily":"Arial"}; // 样式var styleSheet:StyleSheet = new StyleSheet(); //StyleSheetvar label:TextField = new TextField(); // 文本框labelText = "<label>" + labelText + "</label>"”; // 设置 StyleNamestyleSheet.setStyle("label", textStyle); // 设置 Stylelabel.styleSheet = styleSheet; // 关联 textfield 和 stylesheetlabel.htmlText = labelText; // 设置文本内容