Flex LineChart动态创建曲线
2013-08-05 15:17
495 查看
假如后台传到前台的数据格式是:
那么前台创建曲线是
相应的MXML:
[ {time:4, [{name:"技术响应时长", value:50%}], {name:"排除故障时长", value:50%}]}, {time:5, [{name:"技术响应时长", value:40%}, {name:"排除故障时长", value:60%}]}, {time:6, [{name:"技术响应时长", value:70%}, {name:"排除故障时长", value:30%}]} ]
那么前台创建曲线是
protected function getMEMPerfDataResult(event:BusinessManagerEvent):void { var arrcol:ArrayCollection = event.object as ArrayCollection; if(arrcol && arrcol.length>0){ var dataProvider:ArrayCollection = new ArrayCollection(); var timeChartVo:TimeChartVO = arrcol[0] as TimeChartVO; var array:Array = []; var lineSeries:LineSeries; for (var i:int = 0; i < timeChartVo.series.length; i++) { lineSeries = new LineSeries(); lineSeries.displayName = "物理内存利用率"; lineSeries.yField="value"+i; lineSeries.setStyle("form", "curve"); lineSeries.setStyle("lineStroke",seriesStrok0); /* if(i<7){ lineSeries.setStyle("lineStroke",seriesStrok0); } */ array.push( lineSeries); } ///// 设置系列数量。 memoryUsageChart.series = array; for (i = 0; i < arrcol.length; i++) { timeChartVo = arrcol[i] as TimeChartVO; var obj:Object = {}; obj.lineTime = timeChartVo.lineTime; for(var j:int = 0;j<timeChartVo.series.length;j++){ obj["value"+j] = SeriesVO(timeChartVo.series[j]).value; } dataProvider.addItem(obj); } memoryUsageChart.dataProvider = dataProvider; } }
相应的MXML:
<mx:LineChart id="memoryUsageChart" color="#00A7FF" width="90%" height="80%" showDataTips="true" horizontalCenter="0" verticalCenter="0"> <mx:backgroundElements> <mx:GridLines gridDirection="both"> <mx:verticalStroke> <s:SolidColorStroke color="#274E79"/> </mx:verticalStroke> <mx:horizontalStroke> <s:SolidColorStroke color="#274E79"/> </mx:horizontalStroke> </mx:GridLines> </mx:backgroundElements> <mx:horizontalAxis> <mx:CategoryAxis id="memoryCategoryAxis" categoryField="lineTime" title="时间"/> </mx:horizontalAxis> <mx:verticalAxis> <mx:LinearAxis id="memorylinearAxis" baseAtZero="false" title="内存利用率"/> </mx:verticalAxis> <mx:verticalAxisRenderers> <mx:AxisRenderer id="memoryvAxisRenderer" axis="{memorylinearAxis}" axisStroke="{vstroke}" /> </mx:verticalAxisRenderers> <mx:series> <mx:LineSeries yField="value" form="segment" displayName="内存利用率" lineStroke="{seriesStrok1}"/> </mx:series> </mx:LineChart>
相关文章推荐
- Flex LineChart曲线——动态加载组件
- Flex 实现LineChart曲线——动态加载组件
- Flex中如何利用seriesFilters属性,添加/删除LineChart图表曲线阴影
- Flex中如何利用seriesFilters属性,添加/删除LineChart图表曲线阴影
- Android图表控件MPAndroidChart——曲线图LineChart(多条曲线)动态添加数据^a!HsMa0cWDc
- Flex LineChart 动态添加线(LineSeries)及颜色
- 向Flex中的LineChart中动态添加线
- Flex动态创建多个曲线图+柱形图
- Flex 动态创建多个曲线图/柱形图 ColumnSeries
- Flex动态创建多个曲线图+柱形图
- Flex动态创建多个曲线图+柱形图
- flex LineChart曲线图特效
- 基于.net webservices和Flex LineChart组件的动态数据监控
- flex LineChart 图表动态增删Y轴实现。实现了动态增加但是Y轴删不干净
- Flex动态创建多个曲线图+柱形图
- Flex 动态创建 多个曲线图/柱形图 ColumnSeries
- Flex中如何利用seriesFilters属性,添加/删除LineChart图表曲线阴影
- Flex:在LineChart图表中创建一个自定义的LinearAxis函数标签(Tip提示)的例子
- Flex 3 动态创建Chart
- flex4 动态获取对象属性,动态生成数据源,动态生成lineChart,清除数据。