65.9K
CodeProject 正在变化。 阅读更多。
Home

如何在 Silverlight 应用程序中创建视觉上令人惊叹的金融图表 - 第 1 部分

SunilUrs
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.45/5 (15投票s)

2009 年 6 月 23 日

CPOL

2分钟阅读

viewsIcon

57692

downloadIcon

1279

在 XAML 中创建 Silverlight 金融图表。

引言

任何RIA平台的主要应用之一是创建具有视觉丰富且交互式、带有图表和仪表板的仪表盘。 这是一个关于如何在Silverlight应用程序中创建和嵌入视觉上令人惊叹的财务图表的演练。 尽管Silverlight没有原生的图表控件，但有几个图表组件可用，包括微软自己的Silverlight工具包、Visifire图表等。

这是本系列文章的第一部分，我将向您展示如何在Silverlight应用程序中添加基本到高级的财务图表。 在本系列中，我使用Visifire图表（2.2.3 beta 3）控件，这是一个开源的控件，支持大约 18 种图表类型，包括财务图表。 Silverlight工具包还没有财务图表。

背景

股票图和蜡烛图最常用于显示给定时间间隔内的价格波动范围。 它们都需要依赖轴（Y轴）上的 4 个参数。 也就是开盘价、收盘价、最高价和最低价。 自变量（X轴）通常表示日期和/或时间。 这是一个示例数据。

日期 打开 Close 高 低功耗
06/15/2009 130 135 138 125
06/16/2009 140 143 144 136
06/17/2009 141 132 135 129
06/18/2009 135 140 144 131

下面我将向您展示将类似数据转换为创建蜡烛图是多么简单。

项目设置

首先，我在Visual Studio中创建了一个名为“Silverlight Financial Charts”的基本Silverlight应用程序项目，并添加了对Visifire Controls库SLVisifire.Charts.dll的引用。 我正在使用 Visifire 2.2.3 beta 3。 您可以从此处下载最新版本。

Project Setup

现在打开 page.xaml 文件，并为Visifire图表添加命名空间，并将UserControl的Width 更改为 500。

<UserControl x:Class="SilverlightFinancialCharts.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
    Width="500" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">       
    </Grid>
</UserControl>

任何基本的Visifire图表都有以下XML结构

<vc:Chart>
    <vc:Chart.Series>
        <vc:DataSeries>
            <vc:DataSeries.DataPoints>     
            </vc:DataSeries.DataPoints>    
        </vc:DataSeries>
    </vc:Chart.Series>
</vc:Chart>

添加数据点

为了进行比较，一个DataSeries代表一个数据表，类似于前面所示，一个DataPoint代表一行。 在这里，我们使用AxisXLabel添加日期值，使用YValues属性按顺序添加开盘价、收盘价、最高价、最低价。 下面是我添加数据后的效果。

<vc:Chart Theme="Theme3">
    <vc:Chart.Series>
        <vc:DataSeries RenderAs="CandleStick">
            <vc:DataSeries.DataPoints>
                <vc:DataPoint AxisXLabel="Jan 1" YValues="25,20,32,16"/>
                <vc:DataPoint AxisXLabel="Jan 2" YValues="26,40,42,18"/>
                <vc:DataPoint AxisXLabel="Jan 3" YValues="50,40,54,38"/>
                <vc:DataPoint AxisXLabel="Jan 4" YValues="30,38,40,20"/>
                <vc:DataPoint AxisXLabel="Jan 5" YValues="20,10,30,5"/>
                <vc:DataPoint AxisXLabel="Jan 6" YValues="20,33,40,30"/>
                <vc:DataPoint AxisXLabel="Jan 7" YValues="26,16,30,10"/>
                <vc:DataPoint AxisXLabel="Jan 8" YValues="20,40,50,10"/>
                <vc:DataPoint AxisXLabel="Jan 10" YValues="28,18,40,12"/>
                <vc:DataPoint AxisXLabel="Jan 11" YValues="36,30,44,28"/>
                <vc:DataPoint AxisXLabel="Jan 12" YValues="20,34,40,18"/>
                <vc:DataPoint AxisXLabel="Jan 13" YValues="25,30,36,22"/>
                <vc:DataPoint AxisXLabel="Jan 14" YValues="30,18,33,10"/>
                <vc:DataPoint AxisXLabel="Jan 15" YValues="48,38,51,30"/>
                <vc:DataPoint AxisXLabel="Jan 16" YValues="50,60,62,48"/>
                <vc:DataPoint AxisXLabel="Jan 17" YValues="40,50,52,36"/>
                <vc:DataPoint AxisXLabel="Jan 18" YValues="20,40,44,16"/>
                <vc:DataPoint AxisXLabel="Jan 19" YValues="25,35,38,20"/>
                <vc:DataPoint AxisXLabel="Jan 20" YValues="28,18,34,12"/>
            </vc:DataSeries.DataPoints>
        </vc:DataSeries>
    </vc:Chart.Series>
</vc:Chart>

现在我们有了创建蜡烛图所需的基本XML。 以下是运行应用程序后的效果。 绿色的蜡烛线表示价格上涨，红色的表示价格下跌。 您可以通过Dataseries的PriceUpColor和PriceDownColor属性更改颜色。

CandleStick Chart

现在我们有了一个基本的蜡烛图，我们将向图表添加一个标题，并在Y轴上为值添加“$”前缀。 在图表下方添加以下 XML

<vc:Chart.Titles>
    <vc:Title Text="Silverlight Financial Chart"/>
</vc:Chart.Titles>
<vc:Chart.AxesY>
    <vc:Axis Prefix="$"/>
</vc:Chart.AxesY>

这是最终图表

CandleStick Chart

现在，如果您想将图表类型更改为股票图，您只需要将RenderAs属性更改为“Stock”。 下面是更改RenderAs为“Stock”时的效果

Stock Chart

在接下来的文章中，我将向您展示如何创建更高级的财务图表。

历史

  • 2009 年 6 月 23 日：首次发布
© . All rights reserved.