动态构建双轴的FLEX报表
发布时间:2020-12-15 03:55:16 所属栏目:百科 来源:网络整理
导读:近日,客户在原折线报表的基础上又提出了需要展示两个纬度的数据需求。 而且是双Y轴指标。所以花了点功夫写了一个小DOME。 废话不多,上代码。 我们先定义一个数据源。 var jsonStr1:String='{"chartInfo":[{"ptitle":"PieChart示例","xName":"姓名","yName"
近日,客户在原折线报表的基础上又提出了需要展示两个纬度的数据需求。 而且是双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相比较我熟悉一些 // 也可以根据自己的需要换为别的类型,例如:xml for(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; 这样一个双轴的折线图就出来了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |