今天為完成K線圖的開發我用的是LightningChart這個控件，畢竟讓我自己寫一個圖出來也不現實，但是數據源獲得和組裝可是我親手做的哦。

本來LightningChart有一個專門給金融行業的TradingChart，但是我沒有找到綁定數據源的文檔，因此就換成它初級控件LightningChart。

那么咱們開始！如果你想同步學習，請點擊這里下載控件！    點擊這里觀看整個實現過程

一、界面設計

最原始的界面如上，右側的股票詳細信息用Lable來填充的，不過大家可以不用在窗體上命名，畢竟我們會在后端代碼中去實現：

// 1. 初始化1支股票，獲得當天交易信息
            // //blog.csdn.net/zengcq2016/article/details/99682176
            // var hq_str_sz000001="平安銀行,18.450,18.460,18.470,18.550,18.160,18.460,18.470,98028118,1798691052.860,199500,18.460,181000,18.450,31100,18.440,58700,18.430,128800,18.420,27138,18.470,551730,18.480,910000,18.490,1522922,18.500,130700,18.510,2021-12-08,15:00:03,00";

            var dayurl = "http://hq.sinajs.cn/list=sz" + defualtcode;

            WebClient wc = new WebClient();
            string day = wc.GetHtml(dayurl);
            //MessageBox.Show(day); //驗證獲得了數據√
            Regex myRegex = new Regex("var[^=]+=\"", RegexOptions.IgnoreCase);
            string[] ddata = myRegex.Replace(day, "").Replace("\"; ", "").Split(',');

            label1.Text = "股票名字：" + ddata[0];
            label2.Text = "今日開盤價：" + ddata[1];
            label3.Text = "昨日收盤價：" + ddata[2];
            label4.Text = "當前價格：" + ddata[3];
            label5.Text = "今日最高價：" + ddata[4];
            label6.Text = "今日最低價：" + ddata[5];
            label7.Text = "買一報價：" + ddata[6];
            label8.Text = "賣一報價：" + ddata[7];
            label9.Text = "成交的股票數：" + ddata[8];
            label10.Text = "成交金額：" + ddata[9];

為什么要在右側留下股票代碼和時間窗口呢，畢竟咱們也可以自由選擇歷史數據的范圍對吧。

二、 組裝數據

            // 2. 獲得股票歷史中的交易信息
            // //q.stock.sohu.com/hisHq?code=cn_601766,cn_000002&start=20210101&end=20210312
            // [{"status":0,"hq":[["2021-03-12","6.50","6.69","0.19","2.92%","6.42","6.76","1669529","110610.25","0.69%"],["2021-03-11","6.41","6.50","0.09","1.40%","6.41","6.53","972600","62947.88","0.40%"],["2021-03-10","6.52","6.41","-0.07","-1.08%","6.40","6.62","844529","54825.50","0.35%"],["2021-03-09","6.61","6.48","-0.13","-1.97%","6.30","6.70","1458739","94941.70","0.60%"],["2021-03-08","6.70","6.61","-0.06","-0.90%","6.60","6.82","1214779","81362.79","0.50%"],["2021-03-05","6.61","6.67","0.00","0.00%","6.60","6.82","1188462","79757.51","0.49%"],["2021-03-04","6.83","6.67","-0.27","-3.89%","6.67","6.86","1638671","110552.12","0.67%"],["2021-03-03","6.90","6.94","0.05","0.73%","6.78","7.04","1478852","102310.23","0.61%"],["2021-03-02","7.09","6.89","-0.21","-2.96%","6.81","7.09","1763822","121986.24","0.73%"],["2021-03-01","6.91","7.10","0.24","3.50%","6.74","7.15","2248226","156332.11","0.92%"],["2021-02-26","7.12","6.86","-0.43","-5.90%","6.84","7.17","2802882","195577.86","1.15%"],["2021-02-25","7.16","7.29","0.18","2.53%","7.06","7.42","3551148","258151.05","1.46%"],["2021-02-24","6.77","7.11","0.35","5.18%","6.69","7.25","2907593","201648.81","1.20%"],["2021-02-23","6.84","6.76","-0.17","-2.45%","6.72","7.18","2673197","185643.75","1.10%"],["2021-02-22","7.01","6.93","0.07","1.02%","6.84","7.34","4140166","293798.44","1.70%"],["2021-02-19","6.23","6.86","0.62","9.94%","6.21","6.86","3260819","214931.72","1.34%"],["2021-02-18","6.42","6.24","0.10","1.63%","6.23","6.47","1541404","97477.71","0.63%"],["2021-02-10","6.18","6.14","-0.05","-0.81%","6.10","6.21","1130547","69406.66","0.46%"],["2021-02-09","5.96","6.19","0.25","4.21%","5.95","6.20","1650068","101206.13","0.68%"],["2021-02-08","5.95","5.94","-0.02","-0.34%","5.86","6.05","1075763","64056.96","0.44%"],["2021-02-05","6.01","5.96","-0.09","-1.49%","5.96","6.11","1074392","64666.36","0.44%"],["2021-02-04","6.00","6.05","0.04","0.67%","5.90","6.12","1585927","95242.93","0.65%"],["2021-02-03","6.21","6.01","-0.26","-4.15%","6.00","6.23","1984198","120405.45","0.82%"],["2021-02-02","6.25","6.27","0.04","0.64%","6.18","6.42","1624283","102478.88","0.67%"],["2021-02-01","6.20","6.23","-0.02","-0.32%","6.12","6.30","1324846","82384.25","0.54%"],["2021-01-29","6.53","6.25","-0.24","-3.70%","6.15","6.56","2164372","136424.61","0.89%"],["2021-01-28","6.64","6.49","-0.27","-3.99%","6.45","6.65","2026280","132660.77","0.83%"],["2021-01-27","6.51","6.76","0.21","3.21%","6.46","6.93","3590382","242703.03","1.48%"],["2021-01-26","6.51","6.55","-0.03","-0.46%","6.36","6.59","2306221","149368.97","0.95%"],["2021-01-25","6.62","6.58","0.02","0.30%","6.45","6.75","2701754","177888.95","1.11%"],["2021-01-22","6.88","6.56","-0.38","-5.48%","6.53","6.88","3461191","230693.91","1.42%"],["2021-01-21","6.82","6.94","0.07","1.02%","6.65","7.02","3856219","263098.12","1.59%"],["2021-01-20","6.79","6.87","0.09","1.33%","6.63","7.11","4235828","291191.31","1.74%"],["2021-01-19","7.18","6.78","-0.50","-6.87%","6.75","7.35","5096582","356924.75","2.09%"],["2021-01-18","6.96","7.28","0.14","1.96%","6.95","7.44","5341188","384891.97","2.20%"],["2021-01-15","7.80","7.14","-0.49","-6.42%","6.94","7.80","8904252","654360.50","3.66%"],["2021-01-14","7.00","7.63","0.69","9.94%","6.87","7.63","7922107","588822.50","3.26%"],["2021-01-13","6.23","6.94","0.63","9.98%","6.22","6.94","7304638","492553.06","3.00%"],["2021-01-12","6.16","6.31","0.17","2.77%","6.12","6.45","3300926","209354.91","1.36%"],["2021-01-11","5.90","6.14","0.25","4.24%","5.81","6.33","3930888","242600.03","1.62%"],["2021-01-08","5.98","5.89","-0.25","-4.07%","5.86","6.03","2766081","164154.88","1.14%"],["2021-01-07","6.01","6.14","0.25","4.24%","5.84","6.36","6043383","368855.44","2.48%"],["2021-01-06","5.44","5.89","0.54","10.09%","5.41","5.89","3463655","197795.41","1.42%"],["2021-01-05","5.25","5.35","0.07","1.33%","5.25","5.70","2868949","157079.20","1.18%"],["2021-01-04","5.27","5.28","-0.03","-0.56%","5.24","5.30","787491","41507.21","0.32%"]],"code":"cn_601766"},{"status":0,"hq":[["2021-03-12","31.10","31.49","0.34","1.09%","30.66","32.36","901960","283421.91","0.93%"],["2021-03-11","30.76","31.15","0.46","1.50%","30.68","31.46","742679","230527.05","0.76%"],["2021-03-10","31.17","30.69","-0.33","-1.06%","30.30","31.20","877518","269562.69","0.90%"],["2021-03-09","31.32","31.02","-0.18","-0.58%","30.71","31.66","943415","295232.16","0.97%"],["2021-03-08","31.90","31.20","-0.34","-1.08%","31.20","32.20","771960","244055.83","0.79%"],["2021-03-05","32.20","31.54","-1.15","-3.52%","31.08","32.69","1303284","414188.91","1.34%"],["2021-03-04","33.30","32.69","-0.81","-2.42%","32.47","34.10","1292858","428282.69","1.33%"],["2021-03-03","32.95","33.50","0.21","0.63%","32.59","33.99","1164841","387675.03","1.20%"],["2021-03-02","33.00","33.29","-0.06","-0.18%","32.90","34.60","1220150","411031.56","1.26%"],["2021-03-01","33.10","33.35","0.25","0.76%","32.29","33.71","1280834","422975.09","1.32%"],["2021-02-26","32.57","33.10","0.11","0.33%","31.62","34.08","2529180","832930.75","2.60%"],["2021-02-25","30.49","32.99","3.00","10.00%","30.41","32.99","2595404","838266.38","2.67%"],["2021-02-24","29.92","29.99","-0.02","-0.07%","29.50","30.58","969948","291517.72","1.00%"],["2021-02-23","29.69","30.01","0.28","0.94%","29.29","30.05","861380","255868.75","0.89%"],["2021-02-22","29.84","29.73","-0.11","-0.37%","29.52","30.33","852341","254898.52","0.88%"],["2021-02-19","29.70","29.84","-0.17","-0.57%","29.60","30.04","758575","226094.11","0.78%"],["2021-02-18","28.95","30.01","1.18","4.09%","28.95","30.13","996922","295698.88","1.03%"],["2021-02-10","28.61","28.83","0.08","0.28%","28.35","28.98","652149","187496.88","0.67%"],["2021-02-09","28.99","28.75","-0.38","-1.30%","28.54","29.07","673568","193433.05","0.69%"],["2021-02-08","29.00","29.13","0.25","0.87%","28.60","29.76","832037","242805.53","0.86%"],["2021-02-05","28.01","28.88","0.99","3.55%","28.01","29.34","1030261","295483.72","1.06%"],["2021-02-04","27.89","27.89","-0.03","-0.11%","27.43","28.35","665574","185606.25","0.69%"],["2021-02-03","28.34","27.92","-0.42","-1.48%","27.78","28.35","589610","164669.28","0.61%"],["2021-02-02","28.19","28.34","0.27","0.96%","27.96","28.48","716108","202128.81","0.74%"],["2021-02-01","27.97","28.07","0.28","1.01%","27.26","28.12","886694","245662.19","0.91%"],["2021-01-29","28.55","27.79","-0.64","-2.25%","27.57","28.65","963685","269172.75","0.99%"],["2021-01-28","29.05","28.43","-0.97","-3.30%","28.22","29.07","786041","224053.45","0.81%"],["2021-01-27","29.69","29.40","-0.30","-1.01%","29.37","29.95","724303","214677.25","0.75%"],["2021-01-26","29.26","29.70","0.34","1.16%","29.15","30.15","816655","243326.64","0.84%"],["2021-01-25","29.26","29.36","0.10","0.34%","28.56","29.60","973750","282586.78","1.00%"],["2021-01-22","29.95","29.26","-0.84","-2.79%","29.01","29.95","1058090","311413.75","1.09%"],["2021-01-21","30.30","30.10","-0.40","-1.31%","30.02","30.70","875253","265078.16","0.90%"],["2021-01-20","31.07","30.50","-0.78","-2.49%","30.35","31.20","961435","294692.06","0.99%"],["2021-01-19","31.19","31.28","0.02","0.06%","30.72","32.35","1631688","513023.28","1.68%"],["2021-01-18","30.20","31.26","1.31","4.37%","29.83","31.26","1258282","384731.53","1.30%"],["2021-01-15","30.01","29.95","-0.04","-0.13%","29.88","30.73","1123372","339907.25","1.16%"],["2021-01-14","29.93","29.99","0.09","0.30%","29.80","30.79","1216323","368193.81","1.25%"],["2021-01-13","29.90","29.90","0.20","0.67%","29.60","30.22","940504","280791.69","0.97%"],["2021-01-12","29.78","29.70","-0.08","-0.27%","29.37","29.80","980654","289907.19","1.01%"],["2021-01-11","29.50","29.78","0.44","1.50%","29.27","30.35","1388121","414248.28","1.43%"],["2021-01-08","28.98","29.34","0.55","1.91%","28.81","29.45","1028563","300084.56","1.06%"],["2021-01-07","29.00","28.79","0.04","0.14%","28.39","29.50","1226756","354422.41","1.26%"],["2021-01-06","27.80","28.75","0.84","3.01%","27.73","28.75","1048801","297257.28","1.08%"],["2021-01-05","27.78","27.91","0.13","0.47%","27.10","27.93","1162658","318960.72","1.20%"],["2021-01-04","28.40","27.78","-0.92","-3.21%","27.52","28.40","1468441","407941.69","1.51%"]],"code":"cn_000002"}]

            string yearsurl = "http://q.stock.sohu.com/hisHq?code=cn_" + defualtcode + "&start=" + dtp1.Value.ToString("yyyyMMdd") + "&end=" + dtp2.Value.ToString("yyyyMMdd");
            string years = wc.GetHtml(yearsurl);
            //MessageBox.Show(years);//驗證獲得了數據√
            JavaScriptSerializer js = new JavaScriptSerializer();
            ////www.json.cn/json/json2csharp.html  獲得實體類的反序列化結構

            ToJsonMy[] ms = js.Deserialize<ToJsonMy[]>(years);

            // 把每日數據輸出來  ["2021-03-12","6.50","6.69","0.19","2.92%","6.42","6.76","1669529","110610.25","0.69%"]
            List<List<string>> fromdata = ms[0].hq;

            if (fromdata == null)
            {
                MessageBox.Show("未能獲得歷史信息");
                return;
            }

在上述，咱們可以看到從搜狐方面獲得的單只股票歷史數據，get方法獲得，WebClient是我自己封裝的頁面方法， wc.GetHTML因此需要你自己去實現了。ToJsonMy這個實體類，是通過上述返回數據去json.cn里反序列化獲得的，這個工具很好用，對后端開發者超友好！

接下來是組裝數據和綁定環節，我根據lightningchart說明書6.14.1 StockSeries 的數據設置組裝，需要注意交易量是ulong格式，因此強轉了一下，代碼中的ToXXX也是我個人封裝的方法，代碼需要你們自己實現一下啦！

            // 3. 按照lightning chart的規則組裝K線圖交易數據源, 見說明書6.14.1 StockSeries 的數據設置
            StockSeriesData[] data = new StockSeriesData[fromdata.Count];
            var i = fromdata.Count - 1;
            foreach (List<string> s in fromdata)
            {
                DateTime d = Convert.ToDateTime(s[0] + " 00:00:00");
                StockSeriesData one = new StockSeriesData(
                        d.Year, //年
                        d.Month, //月
                        d.Day,// 日
                        s[1].ToDouble(),//開市價格
                        s[2].ToDouble(),// 收市價格
                        s[5].ToDouble(),// 最低
                        s[6].ToDouble(),//最高
                        (UInt32)s[7].ToInt32(),//交易量
                        s[8].ToDouble() //交易額
                        );
                data[i] = one;
                i--;
            }


            //將數據數組分配給各個系列
            // 注意StockSeries是空的，因此需要去屬性里面添加一個數據源
            chart.ViewXY.StockSeries[0].DataPoints = data;
            // K線圖中出現了負值
            

            //設置 X 軸顯示日期
            chart.ViewXY.XAxes[0].ValueType = AxisValueType.DateTime;
            chart.ViewXY.XAxes[0].LabelsAngle = 90;
            chart.ViewXY.XAxes[0].LabelsTimeFormat = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern;
            chart.ViewXY.XAxes[0].MajorDiv = 24 * 60 * 60; //主要分度是以秒為單位的一天
            chart.ViewXY.XAxes[0].AutoFormatLabels = false;
            //設置日期起點
            chart.ViewXY.XAxes[0].DateOriginYear = data[0].Date.Year;
            chart.ViewXY.XAxes[0].DateOriginMonth = data[0].Date.Month;
            chart.ViewXY.XAxes[0].DateOriginDay = data[0].Date.Day;
            //
            //設置適合數據的 X 軸范圍：
            // 在x軸兩端延伸半天。使用第一個和最后一個日期值
            chart.ViewXY.XAxes[0].SetRange(
            chart.ViewXY.XAxes[0].DateTimeToAxisValue(data[0].Date) - 12 * 60 * 60,
            chart.ViewXY.XAxes[0].DateTimeToAxisValue(data[data.Length - 1].Date) + 12 * 60 * 60);

三、運行與總結

LightningChart對金融圖表而言的確比較友好，還有專業的TradingChart是正統的專業的金融K線圖開發【下圖】，如果感興趣請咨詢客服獲得源碼。

LightningChart的產品屬性比較多，可能大家得花很多時間在文檔學習與VS屬性查看過程中度過，對于開發初學者而言建議不要碰他。

如果你是金融行業需要這方面的支持，你可以尋找慧都科技來實現定制，這比較方便。