您的位置:首页 > 其它

Flex LineChart动态创建曲线

2013-08-05 15:17 495 查看
假如后台传到前台的数据格式是:

[
{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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: