使用 Flex 构建实时图表

引言

您是否梦想在您的 Web 应用程序中绘制一个实时平滑的曲线图表，而无需刷新您的网页？例如股票图表，但具有更快的采样率（2 秒或 1 秒）。

众所周知，传统的 Web 应用程序主要用于静态信息显示或简单的数据交互。许多在 Windows Forms 应用程序中很容易实现的计时器控制程序，在 Web 应用程序中却很难完美实现。AJAX 技术缓解了一些实时数据展示问题，因为它只能刷新 Web 页面中您想要的地方，而不是刷新整个页面。然而，AJAX 也无法显示平滑的实时图表。我们如何才能使我们的图表看起来像在播放 Flash，同时还能与我们的数据库通信，所有这些都在运行时进行呢？

Adobe Flex 拥有这些功能。Flex 主要是一个开发人员的工具。虽然 Flex 创建一个 .SWF 文件，可以很容易地嵌入到 Web 应用程序中，但您开发 Flex 应用程序的方式与您开发 Flash RIAs 的方式完全不同。所有 Flex 开发都基于一个框架，该框架为您提供了可重用和可扩展的 UI 组件、数据通信和检索服务、事件处理功能等等。

背景

使用的开发工具

• C# on Visual Studio 2008 with .NET Framework 3.5
• Adobe Flex Builder 3.0
• SQL Server 2005 Express

要理解这篇文章，您应该对如何使用 Flex 有一些基本的了解：http://learn.adobe.com/wiki/display/Flex/Getting+Started。这个网站有很多很好的教程，包括视频教程，可以帮助您快速了解如何使用 Flex。

使用代码

Flex 无法直接与数据库交换数据。它只能与普通的 ASP.NET 应用程序交互，作为 Flex 和数据库之间的接口。通常，它支持 HTTP 服务和 Web 服务，以便从数据库获取数据。我使用 Web 服务来实现数据交换。

首先，我们创建一个数据库表来保存数据。

数据库中的数据应该根据您设置的采样时间而变化。这是我们应该注意的一个关键部分，因为 Flex 图表绑定到此表。换句话说，当数据表更改时，Flex 图表也会更改。这可以通过 SQL 轻松实现。我的设计方法如下所示

• 在每个采样时间插入一个新数据。
• 该表始终保留 10 个数据（可以根据需要更改）。因此，在插入第 11^th 个数据之前，删除您之前保存的第一个数据。
• 不要忘记按照时间顺序对数据进行排序。
• 程序的这部分位于 Web 服务中。每次 Flex 调用 Web 服务中的一个方法时，数据库都应该同时更新。

Web 服务中的代码如下所示

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Collections.Generic;
using System.Data.SqlClient;
using webtest.mainTableAdapters;
// Import the dataset file main.xsd you have created.
// of course, you can directly write your 
// aql queries to operate your database.

namespace webtest
{
    // Change into your own server IP. 
    [WebService(Namespace = "https://:3438/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]
    
    public class LineChartService : System.Web.Services.WebService
    {
        [WebMethod]
        public List<energy> GetEnergy()
        {

            var emplist = new List<energy>();
            Energy emp;
          
            var ad1 = new chart_2TableAdapter();
            //Using class in dataset

            // InsertQuery(), ScalarQuery(), Deleteone(), 
            // GetDataByOrder(),are define in dataset file
            ad1.InsertQuery(s1, s7);
            if (ad1.ScalarQuery() > 10) { ad1.Deleteone(); }
            var dt = new DataTable();
            dt=ad1.GetDataByOrder();

            //Save the data in a object.
            foreach (DataRow dr in dt.Rows)
            {
                emp = new Energy
                {
                    EnergySum = Convert.ToDouble(dr["EnergySum"]),
                    time = dr["time"].ToString()
                };
                emplist.Add(emp);
            }

            return emplist;
        }

        public class Energy
        {
            public double EnergySum = 0;
            public string time = string.Empty;
        }
    }
}

这是数据集 main.xsd

请注意使用 URL 调用 Web 服务：https://:3438/ LineChartService.asmx?WSDL。

您可以看到我定义了一个操作：GetEnergy。ASP.NET 应用程序中的工作已经完成。

Flex MXML

首先，您需要在您的 Flex 应用程序 MXML 文件中添加一个 <mx:WebService> 标签。这就是我现在拥有的

<mx:WebService id="webse" 
  wsdl="https://:3438/LineChartService.asmx?WSDL"
  fault="fault(event)">
     <mx:operation
      name="GetEnergy"
      resultFormat="object"
      result="GetEnergy(event)"
     />
     </mx:WebService> 

在 <mx:Canvas> 标签中，我使用了 click="init()"，以便在您单击 Canvas 时调用 init() 方法。在 init() 内部，我调用了 Web 服务方法 webse.GetEnergy()。

然后，我们编写脚本代码以在采样时间内刷新图表。

private function init():void { 
  // Get Data from WebService and fill chart when you click the canvas 
  webse.GetEnergy(); 
  var timer1:Timer = new Timer(3000); //Trigger, 3s 
  timer1.addEventListener(TimerEvent.timer, SaveEnergy); 
  timer1.start(); 
}

private function GetEnergy(event:ResultEvent):void { 
  // data source 
  linechart1.dataProvider=event.result; 
}

private function SaveEnergy(event:TimerEvent):void { 
  // To Refresh 
  webse.GetEnergy(); 
}

最后，使用 <mx:LineChart> 模板来创建您的图表。您应该做的是将数据绑定到您的图表。

<mx:Stroke id="sample" color="green" weight="2"> //Change the line color here
<mx:Canvas width="100%" height="100%" label="Energy Curve" click="init()">
<mx:LineChart id="linechart1" height="155" width="627"
    paddingLeft="5" paddingRight="100"
    showDataTips="true" x="45" y="31">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="time"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="EnergySum" form="curve" 
  displayName="Energy" lineStroke="{sample}"/>
// Data binding
</mx:series>
</mx:LineChart>
</mx:Canvas> 

现在，当您调试您的 Flex 代码时，将创建一个 .swf 文件。您可以将其嵌入到您的网页的任何地方。当然，您还可以在您的 Flex 图表中添加一些事件来增强交互性，并使您的图表更具吸引力。