本想自己用GDI绘图, 通过数据直接绘制一张蜡柱图, 但觉得这样子的功能比较少, 所以到网上搜索一些能画出K线图的控件. 发现DynamicDataDisplay挺好的, 在它的开发截图里也发现可以绘制蜡柱图, 但文档好像做的不是很好, 不知道怎么用它来画, 在寻找它比较好的例子的时候发现有人推荐用amCharts绘制, 所以便去看了一下, 发现挺好用的, 效果如下:
准备工作
先要去这里下载amCharts Stock Chart for WPF并解压, 新建一个WPF Project, 在Toolbox里右击, 选择Choose Items, 然后点击Browse, 找到解压后的文件夹里有一个AmCharts.Windows.Stock.dll, 单击Okay, 准备工作就做好了.
界面中amCharts控件的配置
<ams:StockChart></ams:StockChart>用于在窗口中添加这样一个控件, 先看看这个控件是怎么绑定数据的:
0 | <ams:StockChart.DataSets> |
1 | <ams:DataSetName="stockSet1"Brush="#7f8da9" |
2 | ItemsSource="{Binding Data}" |
3 | DateMemberPath="date" |
4 | OpenMemberPath="open"HighMemberPath="high" |
5 | LowMemberPath="low"CloseMemberPath="close" |
6 | ValueMemberPath="close"VolumeMemberPath="volume" |
8 | </ams:StockChart.DataSets> |
其中ItemSource中的Data是在程序里产生的, 它是一个StockInfo类的集合. DataMenberPath, HighMenberPath, LowMenberPath, CloseMenberPath, ValueMenberPath, VolumeMenberPath指定的元素都是Data集合中StockInfo的属性. StockInfo类结构如下:
0 | publicclassStockInfo |
2 | publicDateTime date { get; set; } |
3 | publicdoubleopen { get; set; } |
4 | publicdoublehigh { get; set; } |
5 | publicdoublelow { get; set; } |
6 | publicdoubleclose { get; set; } |
7 | publicdoublevolume { get; set; } |
<ams:StockChart.Charts></ams:StockChart.Charts>标签用于插入表格, 表格中可以插入多个图形, 用<ams:Chart.Graphs></amd:Chart.Graphs>标签来创建图形. 比如下面的代码就创建了一个图形:
0 | <ams:StockChart.Charts> |
1 | <ams:ChartTitle="股票价格"GridHeight="2*"> |
2 | <ams:Chart.Graphs> |
3 | <ams:GraphGraphType="Candlestick" |
4 | NegativeBrush="Green"PositiveBrush="Red" |
5 | LegendItemType="Ohlc"LegendPeriodItemType="Ohlc" |
6 | CursorBrush="Blue"CursorSize="6"/> |
7 | </ams:Chart.Graphs> |
8 | </ams:Chart> |
9 | </ams:StockChart.Charts> |
注意其中的NegativeBrush和PositiveBrush属性, 如果不指定颜色的话, 就会默认按照美国股市的颜色来显示. 在美国, 股票涨了用绿色表示, 跌了用红色表示, 这与中国是完全相反的, 因此需要指定颜色. LegentItemType和LegendPeriodItemType用于指定鼠标悬停在图形上, 图形上方的信息显示什么内容, 这里我指定的是OHLC, 也就是Open(开盘), High(最高价), Low(最低价), Close(收盘).
除此之外, 在<ams:StockChart.Charts>标签中我们还可以设置其它属性, 比如线条颜色, 标尺颜色, 信息显示颜色, 是否显示日期:
00 | <ams:Chart.DateTimeAxis> |
01 | <ams:DateTimeAxisValuesForeground="#90000000"StrokeThickness="0"TickLength="0"/> |
02 | </ams:Chart.DateTimeAxis> |
03 | <ams:Chart.LeftValueAxis> |
04 | <ams:ValueAxisValuesForeground="#90000000" |
05 | StrokeThickness="0"TickLength="0"/> |
06 | </ams:Chart.LeftValueAxis> |
07 | <ams:Chart.Legend> |
08 | <ams:Legend |
09 | PositiveValueForeground="Red"NegativeValueForeground="Green" |
10 | IsDateVisible="True"/> |
11 | </ams:Chart.Legend> |
上面的代码都是产生的K线图, amCharts控件还可以在K线图下面画一个成交量的柱形图或者折线图.
00 | <ams:ChartTitle="成交量"> |
01 | <ams:Chart.Graphs> |
02 | <ams:GraphGraphType="Column" |
03 | LegendItemType="Value"LegendPeriodItemType="Value" |
04 | DataField="Volume"PeriodValue="Sum" |
05 | CursorBrush="Blue"CursorSize="6" |
07 | </ams:Chart.Graphs> |
08 | <ams:Chart.DateTimeAxis> |
09 | <ams:DateTimeAxisValuesEnabled="False"StrokeThickness="0"/> |
10 | </ams:Chart.DateTimeAxis> |
11 | <ams:Chart.LeftValueAxis> |
12 | <ams:ValueAxisValuesForeground="#90000000" |
13 | StrokeThickness="0"TickLength="0" |
15 | </ams:Chart.LeftValueAxis> |
16 | <ams:Chart.Legend> |
17 | <ams:LegendPositiveValueForeground="Red"NegativeValueForeground="Green"/> |
18 | </ams:Chart.Legend> |
19 | </ams:Chart> |
20 | </ams:StockChart.Charts> |
在文章上方截图的右下角有个缩放功能, 这个功能在<ams:StockChart.PeriodSelector></ams:StockChart.PeriodSelector>标签里实现的:
00 | <ams:StockChart.PeriodSelector> |
01 | <ams:PeriodSelectorCustomPeriodLabelText="自定义间隔:"PresetPeriodLabelText="缩放:" |
02 | Margin="0,5,0,0"> |
03 | <ams:PeriodSelector.PresetPeriods> |
04 | <ams:PresetPeriodButtonInterval="Day"Quantity="10"ToolTipService.ToolTip="10天"Content="10天"/> |
05 | <ams:PresetPeriodButtonInterval="Month"Quantity="1"ToolTipService.ToolTip="1个月"Content="1月"/> |
06 | <ams:PresetPeriodButtonInterval="Month"Quantity="3"ToolTipService.ToolTip="3个月"Content="3月"/> |
07 | <ams:PresetPeriodButtonInterval="Year"Quantity="1"ToolTipService.ToolTip="1年"Content="1年"/> |
08 | <ams:PresetPeriodButtonInterval="Year"Quantity="3"ToolTipService.ToolTip="3年"Content="3年"/> |
09 | <ams:PresetPeriodButtonQuantity="NaN"ToolTipService.ToolTip="所有数据"Content="最大"/> |
10 | </ams:PeriodSelector.PresetPeriods> |
11 | </ams:PeriodSelector> |
12 | </ams:StockChart.PeriodSelector> |
对数据进行分析
至此, 关于控件的界面方面就是这些内容. 上面提到了绑定了程序里的Data, 这个Data是怎么来的呢? 数据是从国信金太阳网上交易专业版里下载的日线数据, 这个数据格式还是比较有规则的, 第一行表示股票信息, 第二行表示数据类型, 接下来就是数据了, 每个数据之间用\t制表符分隔开.
先看一下Data的定义:
0 | publicList<StockInfo> Data { get; set; } |
当选择了一个上图所示的格式的文本文件, 程序会对这个文本文件进行解析, 注意从国信金太阳下载的数据编码用的是ANSI编码. 解析步骤如下:
00 | privateList<StockInfo> LoadStockInfo(stringfileName) |
02 | using(Stream resourceStream =newFileStream(fileName, FileMode.Open)) |
04 | using(StreamReader reader = newStreamReader(resourceStream, Encoding.GetEncoding("GB2312"))) |
07 | var strings = reader.ReadToEnd().Split(newchar[] { '\n'}, StringSplitOptions.RemoveEmptyEntries); |
09 | stockName = strings[0].Replace("\r", ""); |
10 | var res = newList<StockInfo>(strings.Length - 2); |
12 | for(inti = 2; i < strings.Length; i++) |
14 | stringline = strings[i]; |
15 | string[] subLines = line.Split('\t'); |
16 | DateTime date = DateTime.Parse(subLines[0]); |
17 | Double open = Double.Parse(subLines[1]); |
18 | Double high = Double.Parse(subLines[2]); |
19 | Double low = Double.Parse(subLines[3]); |
20 | Double close = Double.Parse(subLines[4]); |
21 | Double volumn = Double.Parse(subLines[5]); |
23 | newStockInfo { |
24 | date = date, |
25 | open = open, |
26 | high = high, |
28 | close = close, |
29 | volume = volumn |
32 | returnres; |
在程序中有一个按钮用来打开一个"打开文件对话框", 选择了一个文件之后, 调用LoadData方法进行数据的显示:
0 | privatevoidLoadData(stringpath) |
2 | Data = LoadStockInfo(path); |
3 | stockChart.Charts[0].Graphs[0].Title = stockName; |
4 | stockChart.Charts[1].Graphs[0].Title = stockName; |
源代码下载
