基于.net webservices和Flex LineChart组件的动态数据监控

上次用JQuery Flot实现了动态数据监控，但发现做一些改变需要的JS太多，速度还可以，就是效果还不够好，想到Flash应该不错。

跟上次一样，直接贴代码，这次贴个小图。主要就两个部分：.net的webservices的内容，以及Flex的mxml的内容。

 

下面是WebService1.asmx.cs（这里为方便演示起见，用了随机数）

using Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>; using Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Collections.Generic; using Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Web; using Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Web.Services; using Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Data.OleDb; using Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Collections; namespace WebApplication1 { /// <summary> /// Summary description for WebService1 /// </summary> [WebService(Namespace = "http://te<a href="/tag/mpu/" target="_blank" class="keywords">mpu</a>ri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.ComponentModel.Tool<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Item(false)] // To allow this Web Service to be called from script,using ASP.NET AJAX,uncomment the following line. [Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Web.Script.Services.ScriptService] public class WebService1 : Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Web.Services.WebService { [WebMethod] public string HelloWorld() { return "Hello World"; } [WebMethod] public List<MonitorData> monitorPoint() { Random rnd = new Random(); var datalist = new List<MonitorData>(); MonitorData item; for (int i = 0; i < 100; i++) { item = new MonitorData { theData = Convert.T<a href="/tag/odo/" target="_blank" class="keywords">odo</a>uble(rnd.Next(10)),time<a href="/tag/sst/" target="_blank" class="keywords">sst</a>amp = i.ToString() }; datalist.Add(item); } return datalist; } public class MonitorData { public double theData = 0; public string time<a href="/tag/sst/" target="_blank" class="keywords">sst</a>amp = string.Empty; } } }

 

另一部分是flextest.mxml（其中wsdl="http://localhost:1264/WebService1.asmx?WSDL"）的地址可根据上面C#代码生成结果替换。）

<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.a<a href="/tag/dob/" target="_blank" class="keywords">dob</a>e.com/2006/mxml"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; private function init():void { // Get Data from WebService and fill chart when you click the canvas webse.monitorPoint(); var timer1:Timer = new Timer(1000); //Trigger,3s timer1.addEventListener(TimerEvent.TIMER,SaveEnergy); timer1.start(); } private function GetMonitorPoint(event:ResultEvent):void { // data source linechart1.dataProvider=event.result; } private function SaveEnergy(event:TimerEvent):void { // To Refresh webse.monitorPoint(); } ]]--> </mx:Script> <mx:WebService id="webse" wsdl="http://localhost:1264/WebService1.asmx?WSDL"> <mx:operation name="monitorPoint" resultFormat="object" result="GetMonitorPoint(event)"/> </mx:WebService> <mx:<a href="/tag/stroke/" target="_blank" class="keywords">stroke</a> id="sample" color="blue" weight="2"/> <mx:Panel title="DateTimeAxis Example" height="100%" width="100%" click="init()" layout="vertical"> <mx:LineChart id="linechart1" height="100%" width="100%" paddingLeft="5" paddingRight="100" show<a href="/tag/datatip/" target="_blank" class="keywords">datatip</a>s="true"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="time"/> </mx:horizontalAxis> <mx:series> <mx:Li<a href="/tag/nes/" target="_blank" class="keywords">nes</a>eries yField="theData" form="curve" <a href="/tag/dis/" target="_blank" class="keywords">dis</a>playName="Energy" line<a href="/tag/stroke/" target="_blank" class="keywords">stroke</a>="{sample}"/> </mx:series> </mx:LineChart> </mx:Panel> </mx:Application>

 

 

 

最后的效果如下：

 

主要参考了这个实现：

http://www.codeproject.com/KB/web-image/Flex_chart.aspx

另外，下面这篇对时间轴的处理有待研究：

http://www.cnblogs.com/qxiniu/archive/2009/09/24/1573141.html