WPF中使用amCharts繪製股票K線圖

        本想自己用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>用於在視窗中添加這樣一個控制項, 先看看這個控制項是怎麼綁定資料的:

<ams:StockChart.DataSets>    <ams:DataSet Name="stockSet1" Brush="#7f8da9"                    ItemsSource="{Binding Data}"                    DateMemberPath="date"                    OpenMemberPath="open" HighMemberPath="high"                    LowMemberPath="low" CloseMemberPath="close"                    ValueMemberPath="close" VolumeMemberPath="volume"                    /></ams:StockChart.DataSets>

        其中ItemSource中的Data是在程式裡產生的, 它是一個StockInfo類的集合. DataMenberPath, HighMenberPath, LowMenberPath, CloseMenberPath, ValueMenberPath, VolumeMenberPath指定的元素都是Data集合中StockInfo的屬性. StockInfo類結構如下:

public class StockInfo{    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 double volume { get; set; }}

        <ams:StockChart.Charts></ams:StockChart.Charts>標籤用於插入表格, 表格中可以插入多個圖形, 用<ams:Chart.Graphs></amd:Chart.Graphs>標籤來建立圖形. 比如下面的代碼就建立了一個圖形:

<ams:StockChart.Charts>    <ams:Chart Title="股票價格" GridHeight="2*">        <ams:Chart.Graphs>            <ams:Graph GraphType="Candlestick"                         NegativeBrush="Green" PositiveBrush="Red"                         LegendItemType="Ohlc" LegendPeriodItemType="Ohlc"                        CursorBrush="Blue" CursorSize="6" />        </ams:Chart.Graphs>    </ams:Chart></ams:StockChart.Charts>

        注意其中的NegativeBrush和PositiveBrush屬性, 如果不指定顏色的話, 就會預設按照美國股市的顏色來顯示. 在美國, 股票漲了用綠色表示, 跌了用紅色表示, 這與中國是完全相反的, 因此需要指定顏色. LegentItemType和LegendPeriodItemType用於指定滑鼠移至上方在圖形上, 圖形上方的資訊顯示什麼內容, 這裡我指定的是OHLC, 也就是Open(開盤), High(最高價), Low(最低價), Close(收盤).

        除此之外, 在<ams:StockChart.Charts>標籤中我們還可以設定其它屬性, 比如線條顏色, 尺規顏色, 資訊顯示顏色, 是否顯示日期:

<ams:Chart.DateTimeAxis>    <ams:DateTimeAxis ValuesForeground="#90000000" StrokeThickness="0" TickLength="0" /></ams:Chart.DateTimeAxis>                    <ams:Chart.LeftValueAxis>    <ams:ValueAxis ValuesForeground="#90000000"            StrokeThickness="0" TickLength="0" /></ams:Chart.LeftValueAxis><ams:Chart.Legend>    <ams:Legend        PositiveValueForeground="Red" NegativeValueForeground="Green"        IsDateVisible="True"/></ams:Chart.Legend>

        上面的代碼都是產生的K線圖, amCharts控制項還可以在K線圖下面畫一個成交量的直條圖或者折線圖.

<ams:Chart Title="成交量">    <ams:Chart.Graphs>        <ams:Graph GraphType="Column"                    LegendItemType="Value" LegendPeriodItemType="Value"                    DataField="Volume" PeriodValue="Sum"                    CursorBrush="Blue" CursorSize="6"                    />    </ams:Chart.Graphs>    <ams:Chart.DateTimeAxis>        <ams:DateTimeAxis ValuesEnabled="False" StrokeThickness="0" />    </ams:Chart.DateTimeAxis>    <ams:Chart.LeftValueAxis>        <ams:ValueAxis ValuesForeground="#90000000"                StrokeThickness="0" TickLength="0"                />    </ams:Chart.LeftValueAxis>    <ams:Chart.Legend>        <ams:Legend PositiveValueForeground="Red" NegativeValueForeground="Green" />    </ams:Chart.Legend></ams:Chart></ams:StockChart.Charts>

        在文章上方的右下角有個縮放功能, 這個功能在<ams:StockChart.PeriodSelector></ams:StockChart.PeriodSelector>標籤裡實現的:

<ams:StockChart.PeriodSelector>    <ams:PeriodSelector CustomPeriodLabelText="自訂間隔:" PresetPeriodLabelText="縮放:"                    Margin="0,5,0,0">        <ams:PeriodSelector.PresetPeriods>            <ams:PresetPeriodButton Interval="Day" Quantity="10" ToolTipService.ToolTip="10天" Content="10天" />            <ams:PresetPeriodButton Interval="Month" Quantity="1" ToolTipService.ToolTip="1個月" Content="1月" />            <ams:PresetPeriodButton Interval="Month" Quantity="3" ToolTipService.ToolTip="3個月" Content="3月" />            <ams:PresetPeriodButton Interval="Year" Quantity="1" ToolTipService.ToolTip="1年" Content="1年" />            <ams:PresetPeriodButton Interval="Year" Quantity="3" ToolTipService.ToolTip="3年" Content="3年" />            <ams:PresetPeriodButton Quantity="NaN" ToolTipService.ToolTip="所有資料" Content="最大" />        </ams:PeriodSelector.PresetPeriods>    </ams:PeriodSelector></ams:StockChart.PeriodSelector>

對資料進行分析

        至此, 關於控制項的介面方面就是這些內容. 上面提到了綁定了程式裡的Data, 這個Data是怎麼來的呢? 資料是從國信金太陽網上交易專業版裡下載的日線資料, 這個資料格式還是比較有規則的, 第一行表示股票資訊, 第二行表示資料類型, 接下來就是資料了, 每個資料之間用\t定位字元分隔開.

        先看一下Data的定義:

public List<StockInfo> Data { get; set; }

        當選擇了一個所示的格式的文字檔, 程式會對這個文字檔進行解析, 注意從國信金太陽下載的資料編碼用的是ANSI編碼. 解析步驟如下:

private List<StockInfo> LoadStockInfo(string fileName){    using (Stream resourceStream =new FileStream(fileName, FileMode.Open))    {        using (StreamReader reader = new StreamReader(resourceStream, Encoding.GetEncoding("GB2312")))        {            //讀文本中的每一行            var strings = reader.ReadToEnd().Split(new char[] { '\n' }, StringSplitOptions.RemoveEmptyEntries);            //擷取股票名稱            stockName = strings[0].Replace("\r", "");            var res = new List<StockInfo>(strings.Length - 2);            //第一行是股票名稱, 第二行是類型名稱, 第3行才是股票資料            for (int i = 2; i < strings.Length; i++)            {                string line = strings[i];                string[] subLines = line.Split('\t');                DateTime date = DateTime.Parse(subLines[0]);                Double open = Double.Parse(subLines[1]);                Double high = Double.Parse(subLines[2]);                Double low = Double.Parse(subLines[3]);                Double close = Double.Parse(subLines[4]);                Double volumn = Double.Parse(subLines[5]);                res.Add(                    new StockInfo {                        date = date,                        open = open,                        high = high,                        low = low,                        close = close,                        volume = volumn                });            }            return res;        }    }}

        在程式中有一個按鈕用來開啟一個"開啟檔案對話方塊", 選擇了一個檔案之後, 調用LoadData方法進行資料的顯示:

private void LoadData(string path){    Data = LoadStockInfo(path);    stockChart.Charts[0].Graphs[0].Title = stockName;    stockChart.Charts[1].Graphs[0].Title = stockName;}

原始碼下載

       

4月21日補充: 如何在amCharts控制項左上方不顯示註冊網址

        如果使用免費版的amCharts, 控制項介面的左上方會顯示網址連結(如文章頂圖的所示), 很影響美觀, 如何"友好"的不顯示這個連結呢?

        經過我調試之後, amCharts的這個網址只會顯示在第一個Chart中. 可以在設計介面的時候, 在amCharts裡面第一個表格寫在那兒, 但我們不用, 在Form_Loaded()事件裡寫上:

stockChart.Charts[0].Collapse();

        相信大家明白我的意思了, 如所示, 在控制項的左上方就不顯示網址了: