基于 AJAX 的 Silverlight 线形图

• 代码和示例
• Microsoft Silverlight 1.0 RC
• ASP.NET AJAX (如果未安装)

引言

本文是关于使用 Microsoft Silverlight 和 JavaScript 创建一个实时 AJAX 折线图的。

如果您急于了解它的实际外观，请访问我的网站，查看一个“仅 JavaScript”的演示。下载源代码并运行它以查看实际效果。在本文中，我将解释如何将我的 WPFGraph.js 脚本与 Silverlight 结合使用以创建自定义折线图。

折线图在两种不同皮肤下的运行图像

编写 XAML

这是唯一重要的部分。首先，我将解释我的脚本期望的最基本的 XAML。如下图所示，该图实际上由多个线段组成。

显示用于绘制图表的线段的图形

<Line X1="10" Y1="200" X2="20" Y2="200" Canvas.Left="00" Canvas.Top="20" 
      Stroke="Orange" StrokeThickness="1" x:Name="gline0"/>
<Line X1="20" Y1="200" X2="30" Y2="200" Canvas.Left="00" Canvas.Top="20" 
      Stroke="Orange" StrokeThickness="1" x:Name="gline1"/>
<Line X1="30" Y1="200" X2="40" Y2="200" Canvas.Left="00" Canvas.Top="20" 
      Stroke="Orange" StrokeThickness="1" x:Name="gline2"/>
...
...
<Line X1="30" Y1="200" X2="40" Y2="200" Canvas.Left="00" Canvas.Top="20" 
      Stroke="Orange" StrokeThickness="1" x:Name="glineN"/>

如果要绘制 10 个点，则需要 11 个线段。在这种情况下，您的线段应命名为 'gline0, gline1....gline10'。请注意，名称 'gline' 在 JavaScript 中是硬编码的。如果您决定将其更改为其他名称，请不要忘记修改 WPFGraph.js 文件。除了这部分之外，我们还有创建 X 和 Y 轴以及轴上标记的标记。这可以根据您的需要进行自定义。

<Line X1="10" Y1="0" X2="10" Y2="200" Canvas.Left="00" Canvas.Top="20" 
      Stroke="Red" StrokeThickness="1"/>

<Line X1="7" Y1="0" X2="280" Y2="0" Canvas.ZIndex="3" Opacity="0.5" 
      Canvas.Left="00" Canvas.Top="20" Stroke="Red" StrokeThickness="1"/>
<Line X1="7" Y1="40" X2="280" Y2="40" Canvas.ZIndex="3" Opacity="0.5" 
      Canvas.Left="00" Canvas.Top="20" Stroke="Red" StrokeThickness="1"/>
<Line X1="7" Y1="80" X2="280" Y2="80" Canvas.ZIndex="3" Opacity="0.5" 
      Canvas.Left="00" Canvas.Top="20" Stroke="Red" StrokeThickness="1"/>
<Line X1="7" Y1="120" X2="280" Y2="120" Canvas.ZIndex="3" Opacity="0.5" 
      Canvas.Left="00" Canvas.Top="20" Stroke="Red" StrokeThickness="1"/>
<Line X1="7" Y1="160" X2="280" Y2="160" Canvas.ZIndex="3" Opacity="0.5" 
      Canvas.Left="00" Canvas.Top="20" Stroke="Red" StrokeThickness="1"/>
<Line X1="10" Y1="200" X2="280" Y2="200" Canvas.Left="00" Canvas.Top="20" 
      Stroke="Red" StrokeThickness="1"/>

<Line X1="64" Y1="197" X2="64" Y2="202" Canvas.Left="00" Canvas.Top="20" 
      Stroke="Red" StrokeThickness="1"/>
<Line X1="118" Y1="197" X2="118" Y2="202" Canvas.Left="00" Canvas.Top="20" 
      Stroke="Red" StrokeThickness="1"/>
<Line X1="172" Y1="197" X2="172" Y2="202" Canvas.Left="00" Canvas.Top="20" 
      Stroke="Red" StrokeThickness="1"/>
<Line X1="226" Y1="197" X2="226" Y2="202" Canvas.Left="00" Canvas.Top="20" 
      Stroke="Red" StrokeThickness="1"/>
<Line X1="280" Y1="197" X2="280" Y2="202" Canvas.Left="00" Canvas.Top="20" 
      Stroke="Red" StrokeThickness="1"/>

AJAX 的服务器端代码

在此示例中，我使用了 ASP.NET 中的一个简单函数 (Webmethod) 来完成此任务。它返回一个数值。在现实世界中，它将来自数据库或其他来源。我还放置了一个随机延迟来模拟现实世界的情况。此方法应该在我们要放置图表的页面的代码隐藏文件中。可以使用 PageMethods 对象从客户端 JavaScript 调用它。

    [System.Web.Services.WebMethod]
    public static int GetNextValue()
    {
        Random r = new Random();
        System.Threading.Thread.Sleep(r.Next(100, 500));
        return r.Next(0, 190);
    }

客户端 HTML 和 JavaScript

在 *.aspx 页面上，您需要添加以下标记以创建 Silverlight 控件的实例。

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" 
         EnablePageMethods="true"/>
    <div>
        <object id="slvr1"  width="350px" height="270px" 
                type="application/x-silverlight">
            <param name="SourceElement" value=null />
            <param name="Source" value="Graph.xaml" />
            <param name="WindowlessMode" value="false" /> 
            <param name="MaxFrameRate" value="30" /> 
            <param name="OnError" value="myErrorHandler" /> 
        </object> 
    </div>
    <input id="Button1" type="button" onclick="startstop()"
           value="Start/Stop" />
</form>

请注意，ASP.NET 页面上有一个 ScriptManager 控件，其 EnablePageMethods 属性设置为 true。此外，我放了一个按钮，可以用来启动和停止图表上的实时绘图。

接下来重要的一部分是编写 JavaScript。

<script type="text/javascript" src="WPFGraph.js"></script>
<script language="javascript">

var mygraph;
var start =true;

function OnCanvasLoaded(sender,args)
{
    mygraph = new WPFGraph("slvr1",26,200);
    PageMethods.GetNextValue(OnComplete,null);
}

function OnComplete(a)
{
    mygraph.PlotValue(a);
    if(start ==false)return;
    window.setTimeout("PageMethods.GetNextValue(OnComplete,null)",500);
}

function startstop()
{
    start=!start;
    if(start)PageMethods.GetNextValue(OnComplete,null);
}
</script> 

这里要注意的第一件事是 WPFGraph 类的构造函数的参数。第一个是 Silverlight 控件的 id，第二个是要绘制的点数 (= 线段数 - 1)，最后一个参数是图表将用于绘制的最大值（范围）。第二个参数与 XAML 文件相关，而第三个参数与来自服务器端函数的值相关。您应该在您的代码中适当地设置它们。

进一步的自定义

您可以使用 XAML 做很多有趣的事情来改变图表的外观。在 Example2.aspx 中，我使用不同的 XAML 创建了相同的图表。您可以在下载的源代码中找到它。希望您发现我的代码有用。如果您确实在您的应用程序中使用它，我很乐意收到您的来信！