Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Chart升级Code Review I   - 通用部分            梅安待 赵庶             2012/02/20
两大类图表基于坐标图表  折线图  区域图  柱状图/堆叠图  散点图独立图表  饼图/环状图  雷达图  气泡图  仪表盘图  关系图
总体逻辑/流程自定义区     数据object        图表Chart   自定义元素Custom Item                         图形Graph       默认元素ItemBase库        obje...
基本数据格式举例 var obj:Object = {     "config":{      //         "width":420,    //                    label         "height":20...
类内部的实现       //           getter/setter       public function get axisLine():Object {           return _styles["axisLine"]...
//setter      axis.axisLine = {          "show": true,    //          "lineStyle": {"color": 0x888888, "thickness":2, "alp...
坐标基类override protected function initStyle():void {    _styles["name"] = "";      //          (        )    _styles["unit"]...
具体坐标override protected function initStyle():void {    super.initStyle();    _styles["data"] = [];//        label    _style...
Tip提示基于SmartTip可以设置对单个Item可以设置对单个类目点允许设置文本样式 {     "round":3,    //     "backgroundColor":0x0,     "backgroundAlpha":0...
Legend图例override protected function initStyle():void {    _styles["backGroundStyle"] = {//        "show": false,        "a...
通用Style LineStyle {     "color":"#FF0000",      //     "thickness":1,     //     "alpha":1    // } AreaStyle {     "lineCo...
Style设置方式 AreaStyle var normalStyle:Object = {     "size":36,     "areaStyle":{         "lineThickness":2,         "lineCo...
Upcoming SlideShare
Loading in …5
×

Chart升级code review

724 views

Published on

chart升级code review

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Chart升级code review

  1. 1. Chart升级Code Review I - 通用部分 梅安待 赵庶 2012/02/20
  2. 2. 两大类图表基于坐标图表  折线图  区域图  柱状图/堆叠图  散点图独立图表  饼图/环状图  雷达图  气泡图  仪表盘图  关系图
  3. 3. 总体逻辑/流程自定义区 数据object 图表Chart 自定义元素Custom Item 图形Graph 默认元素ItemBase库 object.data[i] object.data[i].itemStyles
  4. 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. 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. 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. 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. 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. 9. Tip提示基于SmartTip可以设置对单个Item可以设置对单个类目点允许设置文本样式 { "round":3, // "backgroundColor":0x0, "backgroundAlpha":0.7, "type":"single", // item item:single/multiple "textStyle" : { "fontFamily" : "Arial", "color" : "#ffffff" } }
  10. 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. 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. 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; //

×