动态构建双轴的FLEX报表

近日，客户在原折线报表的基础上又提出了需要展示两个纬度的数据需求。

而且是双Y轴指标。所以花了点功夫写了一个小DOME。

废话不多，上代码。

我们先定义一个数据源。

var jsonStr1:String='{"chartInfo":[{"ptitle":"PieChart示例","xName":"姓名","yName":"时间","valueUnit":"天"}],'+'"data":[{"HB":-17.94,"TB":711.8,"COMPANY_ID":"北京","TS_COUNT":500798},'+'{"HB":-19.38,"TB":61.32,"COMPANY_ID":"广东","TS_COUNT":2152220},'+'{"HB":23.45,"TB":1082.3,"COMPANY_ID":"上海","TS_COUNT":565910 },'+'{"HB":-2.83,"TB":976.41,"COMPANY_ID":"天津","TS_COUNT":289651 },'+'{"HB":8.33,"TB":625.69,"COMPANY_ID":"重庆","TS_COUNT":453750 },'+'{"HB":-6.68,"TB":768.7,"COMPANY_ID":"辽宁","TS_COUNT":922836 },'+'{"HB":6.4,"TB":193.79,"COMPANY_ID":"江苏","TS_COUNT":1047326 },'+'{"HB":-20.85,"TB":-7.88,"COMPANY_ID":"湖北","TS_COUNT":700200 },'+'{"HB":-0.14,"TB":841.24,"COMPANY_ID":"四川","TS_COUNT":329885 },'+'{"HB":-4.43,"TB":1013.8,"COMPANY_ID":"陕西","TS_COUNT":563092 },'+'{"HB":252.06,"TB":234.48,"COMPANY_ID":"河北","TS_COUNT":217477 },'+'{"HB":-16.57,"TB":442.49,"COMPANY_ID":"山西","TS_COUNT":672172 },'+'{"HB":25.75,"TB":-19.9,"COMPANY_ID":"河南","TS_COUNT":168895 },'+'{"HB":21.16,"TB":178.73,"COMPANY_ID":"吉林","TS_COUNT":1071927 },'+'{"HB":-36.24,"TB":47.67,"COMPANY_ID":"黑龙江","TS_COUNT":370784 },'+'{"HB":24.61,"TB":178.15,"COMPANY_ID":"内蒙古","TS_COUNT":23579 },'+'{"HB":-16.33,"TB":2738.08,"COMPANY_ID":"山东","TS_COUNT":912839 },'+'{"HB":-2.02,"TB":1164.05,"COMPANY_ID":"安徽","TS_COUNT":761778 },'+'{"HB":9.64,"TB":136.87,"COMPANY_ID":"浙江","TS_COUNT":1294851 },'+'{"HB":-19.93,"TB":241.24,"COMPANY_ID":"福建","TS_COUNT":526767 },'+'{"HB":-14.78,"TB":929.68,"COMPANY_ID":"湖南","TS_COUNT":742834 },'+'{"HB":-9.74,"TB":1738.84,"COMPANY_ID":"广西","TS_COUNT":1048909 },'+'{"HB":44.73,"TB":145.85,"COMPANY_ID":"江西","TS_COUNT":285494 },'+'{"HB":28.07,"TB":2757.21,"COMPANY_ID":"贵州","TS_COUNT":1005768 },'+'{"HB":678.84,"TB":945.37,"COMPANY_ID":"云南","TS_COUNT":418095 },'+'{"HB":32.87,"TB":1503.92,"COMPANY_ID":"西藏","TS_COUNT":15542 },'+'{"HB":-7.32,"TB":42.62,"COMPANY_ID":"海南","TS_COUNT":53241 },'+'{"HB":72.93,"TB":32.44,"COMPANY_ID":"甘肃","TS_COUNT":92703 },'+'{"HB":-12.07,"TB":583.65,"COMPANY_ID":"宁夏","TS_COUNT":48471 },'+'{"HB":5.24,"TB":3894.36,"COMPANY_ID":"青海","TS_COUNT":88595 },'+'{"HB":-18.43,"TB":646.61,"COMPANY_ID":"新疆","TS_COUNT":228536}]}';  

然后就是相关具体代码实现

// 将后台传的json数据转换一下var objdata:Object=JSON.decode(jsonStr1);// 将数据转换为FLEX识别的数组格式var arr:Array = (objdata.data as Array);var obj:Object = null;// 遍历数据，封装到chartDataSouse:ArrayCollection。// 在图标中数据源ArrayCollection相比较我熟悉一些// 也可以根据自己的需要换为别的类型，例如：xmlfor(var i:int=0;i<arr.length;i++){obj = new Object();obj.HB = arr[i].HB;obj.TB = arr[i].TB;obj.COMPANY_ID = arr[i].COMPANY_ID;obj.TS_COUNT = arr[i].TS_COUNT;chartDataSouse.addItem(obj);}columnChart.percentWidth=100;columnChart.percentHeight=100;// 定义X轴数据var ca:CategoryAxis = new CategoryAxis();// 设置数据来源ca.dataProvider = chartDataSouse;// 设置数据取值对象ca.categoryField = "COMPANY_ID";// 柱状图X周数据columnChart.horizontalAxis = ca;// 左边Y轴取值,即投诉总量 这里也让flex自己分配//var leftYzhou:LinearAxis = new LinearAxis();//leftYzhou.maximum = 2152220;//leftYzhou.minimum = 10000;//columnChart.verticalAxis = leftYzhou;var myLineSeries1:Array=new Array();columnSeries.dataProvider = chartDataSouse;columnSeries.xField = "COMPANY_ID";columnSeries.yField = "TS_COUNT";columnSeries.displayName = "投诉总量";myLineSeries1.push(columnSeries);columnChart.series = myLineSeries1;// 如果需要设置右边Y轴的数据，就如下，如果不需要就让flex自动选择//var rightYzhou:LinearAxis = new LinearAxis();//rightYzhou.maximum = 700;//rightYzhou.minimum = -100;//columnChart.secondVerticalAxis = rightYzhou;var myLineSeries:Array=new Array();lineSeries.dataProvider = chartDataSouse;lineSeries.xField = "COMPANY_ID";lineSeries.yField = "TB";lineSeries.displayName = "同比";myLineSeries.push(lineSeries);var lineSeries2:LineSeries = new LineSeries();lineSeries2.dataProvider = chartDataSouse;lineSeries2.xField = "COMPANY_ID";lineSeries2.yField = "HB";lineSeries2.displayName = "环比";myLineSeries.push(lineSeries2);columnChart.secondSeries = myLineSeries;columnChart.showDataTips = true;chartPanel.addChild(columnChart);columnChart.addEventListener(MouseEvent.MOUSE_DOWN,stopMove);columnChart.addEventListener(MouseEvent.MOUSE_MOVE,moveLineChart);chartLegend.dataProvider=columnChart;

这样一个双轴的折线图就出来了。