基于 WPF Toolkit 的蜡烛图

• 下载源代码 - 137.24 KB

引言

基于 WPFToolkit 创建 K 线图。

背景

我花了大量时间尝试让 K 线图工作，并在网上寻找示例。最终，本文中的解决方案是我得出的结果。其思路是在 BubbleSeries 上应用样式来创建 K 线。如果您有更好的方法，请告诉我，我将更新本文。

什么是 K 线图？

K 线图的颜色，默认情况下为红色或绿色，由当前 K 线相对于前一个 K 线收盘价的位置决定。

如果 K 线收盘价低于前一个 K 线的收盘价，则 K 线图将显示为红色。

如果 K 线收盘价高于前一个 K 线的收盘价，则 K 线图将显示为绿色。

有些 K 线图将填充（实心），有些将为空心（空心），具体取决于当前 K 线收盘价相对于其开盘价的位置。

如果 K 线收盘价低于其开盘价，则 K 线图将填充。

如果 K 线收盘价高于其开盘价，则 K 线图将为空心。

Using the Code

将 CandleStick 文件夹下的文件添加到您的项目中。

在需要图表的 .xaml 文件中，添加命名空间

xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;
assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:local="clr-namespace:CandleStickChart" 

现在您可以获取图表如下

 <charting:Chart >
    <local:CandleStickSeries 
                    ItemsSource="{StaticResource StockDataCollection}"
                    IndependentValuePath="Date"
                    DependentValueBinding="{Binding Path=High}"
                    SizeValueBinding="{Binding Path=WickHeight}"
                    DataPointStyle="{StaticResource CandleStick}"
                    Title="Stock">
    </local:CandleStickSeries>
</charting:Chart>

资源字典

ResourceDictionary 包含将 Bubble 建模为 K 线的样式。请确保更新您的 App.xaml 以合并该字典，如下所示

 <Application.Resources>
   <ResourceDictionary> 
       <ResourceDictionary.MergedDictionaries>
           <ResourceDictionary Source="CandleStickDictionary.xaml" />
       </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>         
</Application.Resources> 

幕后

让我们看看数据结构。

StockData 不言自明。

public class StockData
{
   public DateTime Date { get; set; }
   public double Open { get; set; }
   public double High { get; set; }
   public double Low { get; set; }
   public double Close { get; set; }
   public int Volume { get; set; }
} 

CandleStickViewModel 包含视图显示 K 线所需的数学计算，例如灯芯高度、实体高度以及调整实体的原点。

CandleStickViewModelCollection 包含所有 K 线。由于 K 线的颜色取决于前一个 K 线，因此它不会显示第一个 K 线。

以下方法几乎可以正确地获取相对于灯芯的实体原点，希望有人能提供完美的数学公式。我注意到实体的位置并不完全正确。

public Point Origin
{
    get
    { 
        Point origin = new Point() { X = 0 };
        var top = Open > Close ? Open : Close;
        origin.Y = (High - top + (BodyHeight/2)) / WickHeight ;
        return origin;
    }
} 

CandleStickSeries 包含将 K 线数据点转换为画布坐标的代码。

关注点

为了创建一个空心 K 线，我尝试使用多边形而不是两个矩形，但我无法使其正确缩放。如果我们不使用浅灰色填充实体矩形，我们将能够看到用于绘制灯芯的矩形。

历史

• 2011 年 12 月 4 日：初始发布