近日,客户在原折线报表的基础上又提出了需要展示两个纬度的数据需求。
而且是双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;
这样一个双轴的折线图就出来了。