彩票走势图

实例解析WPF Elements强大的股市图

原创|其它|编辑:郝浩|2012-12-17 10:25:10.000|阅读 773 次

概述:在最新的WPF Elements中,加入了股市图和蜡烛图,这些图表会随着时间的推移实时的显示股市的活动,今天就来看看它强大的功能特性,文中附实例和源码。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

    在最新的WPF Elements中,加入了股市图和蜡烛图,这些图表会随着时间的推移实时的显示股市的活动,今天就来看看它强大的功能特性。

    棒线图显示一条垂直线里面有最高和最低的值,在左侧放置了一个刻度线显示所对应的值,下面就是一个棒线图的例子。

实例解析WPF Elements强大的股市图

    蜡烛图和帮线图很像,但是在开始和结束刻度之间有一个方形,这个着色的方形将会更加容易的看清股市变化趋势,下面就是一个蜡烛图的默认风格样式:

实例解析WPF Elements强大的股市图

    想要创建类似这样的股市图,你所需要做的就是添加一个帮线图系列或是蜡烛图系列到一个图表控件,然后再WPF Elements里的StockDataPoint模型类填充项目源,构造函数StockDataPoint主要用在日期时间和值上边。

    创建股市图好的视觉效果需要用适当的值,由于股市图在默认的情况下是沿着时间轴进行绘制,你也按照你的方式来设置X轴的的标签格式。下面是一个简单的股市图的创建实例,这个项目源是绑定到一个在后台代码的用于搜集股市数据点对象的数据属性上。

<ms:Chart Title="Stock prices">
  <ms:StockSeries ItemsSource="{Binding Data}" Title="Year 2012" />
  <ms:Chart.XAxis>
    <ms:ChartAxis LabelFormat="{}{0:dd MMM}" LabelRotation="50" />
  </ms:Chart.XAxis>
</ms:Chart>

使用自己的数据模型

     提供的股市数据点对象模型类是为了提供一个方便的方法来获得股市图表,并实现快速的建立运行,但是如果说你并不想用这个模型类来实现图表的创建,集也可以用你自己的模型,下面就是一些你可能想使用自己的数据模型的场景:

  • 你已经有了一个模型,遵循了你自己公司的命名约定或是包含额外的数据值。
  • 你想要你的x轴是一个数值轴而不是时间日期。
  • 你更喜欢使用一个不可变的数据模型或一个struct。

    想要使用你自己的数据点模型,你需要告诉股市图对于开盘、收盘、最高值、最低值以及X轴应该使用哪些属性。下面就是一个简单的模型来实现刚才所说的内容,但是值得注意的是设置YBinding属性也是非常重要的。

public class MyStockDataPoint
{
  public MyStockDataPoint(double x, double open, double high, double low, double close)
  {
    X = x;
    OpenValue = open;
    HighValue = high;
    LowValue = low;
    CloseValue = close;
  }
 
  public double X { get; private set; }
 
  public double OpenValue { get; private set; }
 
  public double HighValue { get; private set; }
 
  public double LowValue { get; private set; }
 
  public double CloseValue { get; private set; }
}
<ms:Chart Title="Stock prices">
  <ms:CandlestickSeries ItemsSource="{Binding Data}" Title="Year 2012"
                        XBinding="{Binding X}" YBinding="{Binding LowValue}"
                        OpenBinding="{Binding OpenValue}" HighBinding="{Binding HighValue}"
                        LowBinding="{Binding LowValue}" CloseBinding="{Binding CloseValue}" />
</ms:Chart>

自定义样式选项

    股市图最基本的可供选择的样式就是改变positive 和negative brushes。常用的SeriesBrush属性主要用于着色的数据点,可以使用NegativeSeriesBrush属性来改变数据点颜色。也可以改变路径的厚度或是改变填充蜡烛的颜色,都可以通过设置PositiveStyle和NegativeStyle属性实现:

实例解析WPF Elements强大的股市图

Style x:Key="ThinPositiveCandlestickStyle" TargetType="Path">
  <Setter Property="StrokeThickness" Value="1" />
  <Setter Property="Stroke" Value="Black" />
  <Setter Property="Fill" Value="#98C723" />
</Style>
 
<Style x:Key="ThinNegativeCandlestickStyle" TargetType="Path">
  <Setter Property="StrokeThickness" Value="1" />
  <Setter Property="Stroke" Value="Black" />
  <Setter Property="Fill" Value="#AA2B1E" />
</Style>
 
<ms:Chart Title="Stock prices">
  <ms:CandleStickSeries ItemsSource="{Binding Data}"
                        PositiveStyle="{StaticResource ThinPositiveCandlestickStyle}"
                        NegativeStyle="{StaticResource ThinNegativeCandlestickStyle}" />
  <ms:Chart.XAxis>
    <ms:ChartAxis LabelFormat="{}{0:dd MMM}" LabelRotation="50" />
  </ms:Chart.XAxis>
</ms:Chart>

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP