asp.net 製作K線圖——highstock
阿新 • • 發佈：2019-02-17
highcharts是一款非常不錯的開源的js繪圖工具，我們所需要做的就是用他能聽懂的語言告訴他怎麼做，剩下的事情就交給highcharts了。
廢話不多說步入正題。
2.在自己的網站引用jquery.min.js和highstock.js（jquery.min.js要放在highstock前面）
3.前臺網站程式碼編寫，直接貼程式碼
<head runat="server"> <title> 股票走勢圖 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery.min.js"> </script> <script type="text/javascript" src="js/highstock.js"> </script> <script type="text/javascript"> $(function() { //官方例子獲取json資料地址（經常無法訪問） //http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=? $.getJSON('JsonData/StockData.ashx?callback=?', //通過後臺獲取資料庫中股票phlc資料 function(data) { //把獲取的資料放入ohlc 中 var ohlc = [], volume = [], avg5 = [], avg10 = [], avg20 = [], dataLength = data.length; for (i = 20; i < dataLength; i++) { ohlc.push([data[i][0], // the date data[i][1], // open data[i][2], // high data[i][3], // low data[i][4] // close ]); //5日均線 var temp5 = (parseFloat(data[i][4]) + parseFloat(data[i - 1][4]) + parseFloat(data[i - 2][4]) + parseFloat(data[i - 3][4]) + parseFloat(data[i - 4][4])) / 5; avg5.push([data[i][0], temp5]); //10日均線 var temp10 = (parseFloat(data[i][4]) + parseFloat(data[i - 1][4]) + parseFloat(data[i - 2][4]) + parseFloat(data[i - 3][4]) + parseFloat(data[i - 4][4]) + parseFloat(data[i - 5][4]) + parseFloat(data[i - 6][4]) + parseFloat(data[i - 7][4]) + parseFloat(data[i - 8][4]) + parseFloat(data[i - 9][4])) / 10; avg10.push([data[i][0], temp10]); //20日均線 var temp20 = (parseFloat(data[i][4]) + parseFloat(data[i - 1][4]) + parseFloat(data[i - 2][4]) + parseFloat(data[i - 3][4]) + parseFloat(data[i - 4][4]) + parseFloat(data[i - 5][4]) + parseFloat(data[i - 6][4]) + parseFloat(data[i - 7][4]) + parseFloat(data[i - 8][4]) + parseFloat(data[i - 9][4]) + parseFloat(data[i - 10][4]) + parseFloat(data[i - 11][4]) + parseFloat(data[i - 12][4]) + parseFloat(data[i - 13][4]) + parseFloat(data[i - 14][4]) + parseFloat(data[i - 15][4]) + parseFloat(data[i - 16][4]) + parseFloat(data[i - 17][4]) + parseFloat(data[i - 18][4]) + parseFloat(data[i - 19][4])) / 20; avg20.push([data[i][0], temp20]); //volume volume.push([data[i][0], // 日期 data[i][5] // volume ]) } // 建立圖表 $('#container').highcharts('StockChart', /** * 域選擇配置 * * @param {array} buttons 縮放選擇按鈕 * @param {int} selected 預設選擇縮放按鈕中的第幾個 * @param {boolean} inputEnabled 是否允許input標籤選框 */ rangeSelector: { // 縮放選擇按鈕，是一個數組。 // 其中type可以是： 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。 // 其中count是指多少個單位type。 // 其中text是配置顯示在按鈕上的文字 buttons: [{ type: 'year', count: 1, text: '1年' }], // 預設選擇域：0（縮放按鈕中的第一個）、1（縮放按鈕中的第二個）…… selected: 1, enabled: false // 是否允許input標籤選框 // inputEnabled: false }, navigator: { enabled: true }, /** * X軸座標配置 * * @param {object} dateTimeLabelFormats x軸日期時間格式化，不用修改直接使用 */ xAxis: { // 如果X軸刻度是日期或時間，該配置是格式化日期及時間顯示格式 dateTimeLabelFormats: { second: '%Y-%m-%d %H:%M:%S', minute: '%Y-%m-%d %H:%M', hour: '%Y-%m-%d %H:%M', day: '%Y-%m', week: '%Y-%m', month: '%Y-%m', year: '%Y' } }, credits: { text: 'xxx公司', href: 'http://xxxxx.com' }, title: { align: 'left', text: 'xxx股票' }, yAxis: [{ title: { text: 'OHLC' }, height: 200, lineWidth: 1 }, { title: { text: 'Volume' }, top: 290, height: 100, offset: 0, lineWidth: 1 }], /** * 氣泡示說明標籤 * * @param {string} xDateFormat 日期時間格式化 */ tooltip: { valueDecimals: 2, useHTML: true, formatter: function() { var s = '<b>' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b><br/>'; s += '開盤價：' + this.points[0].point.open + '<br/>最高價：' + this.points[0].point.high + '<br/>最低價：' + this.points[0].point.low + '<br/>收盤價：' + this.points[0].point.close + '<br/>市值：' + this.points[1].y + '<br/><font color="' + this.points[2].series.color + '">MA5：' + Math.round(this.points[2].y * 100) / 100 + '</font>' + '<br/><font color="' + this.points[3].series.color + '">MA5：' + Math.round(this.points[3].y * 100) / 100 + '</font>' + '<br/><font color="' + this.points[4].series.color + '">MA5：' + Math.round(this.points[4].y * 100) / 100 + '</font>'; return s; } }, chart: { height: 500 //width: 100% }, exporting: { url: 'http://127.0.0.1:2415/ExportServer.aspx' }, plotOptions: { candlestick: { color: 'green', upColor: 'red', lineColor: 'green', upLineColor: 'red' }, column: { colorByPoint: false } }, series: [{ type: 'candlestick', name: 'AAPL', data: ohlc // dataGrouping: { // units: groupingUnits // } }, { type: 'column', name: 'Volume', data: volume, yAxis: 1 //// dataGrouping: { //// units: groupingUnits //// } }, { name: 'MA5', data: avg5, type: 'spline', threshold: null, tooltip: { valueDecimals: 2 } }, { name: 'MA10', data: avg10, type: 'spline', threshold: null, tooltip: { valueDecimals: 2 } }, { name: 'MA20', data: avg20, type: 'spline', threshold: null, tooltip: { valueDecimals: 2 } }] }); }); }); </script> <script type="text/javascript"> </script> </head> <body> <form id="form1" runat="server"> <div> <div id="test"> </div> <div id="container" style="height: 100%; width: 100%"> </div> </div> </form> </body>
4.後臺資料獲取
新建一個axsh檔案
程式碼如下
效果如下using System; using System.Collections; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using System.Web.Script.Serialization; using System.Text; namespace HighCharts_test.JsonData { /// <summary> /// $codebehindclassname$ 的摘要說明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class StockData : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/javascript"; string callback = context.Request.QueryString["callback"]; StringBuilder json = new StringBuilder(); json.Append(callback); DataSet ds = GetStockData("600379"); json.Append(DataSetToJson(ds)); //json = serializer.Serialize(ds); context.Response.Write(json); } public string GetUNIX(string dateTimeString) { DateTime dtStart = TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970, 1, 1)); DateTime dtNow = DateTime.Parse(dateTimeString); TimeSpan toNow = dtNow.Subtract(dtStart); string timeStamp = toNow.Ticks.ToString(); timeStamp = timeStamp.Substring(0, timeStamp.Length - 4); return timeStamp; } /// <summary> /// 將DataSet轉化成JSON資料 /// </summary> /// <param name="ds"></param> /// <returns></returns> public StringBuilder DataSetToJson(DataSet ds) { string json = string.Empty; try { if (ds.Tables.Count == 0) throw new Exception("DataSet中Tables為0"); json = "(["; for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { json += "["; for (int n = 0; n < ds.Tables[0].Columns.Count; n++) { if (n==0) { json +=GetUNIX( ds.Tables[0].Rows[i][n].ToString()) + ","; } else { json += ds.Tables[0].Rows[i][n].ToString() + ","; } } json = json.Substring(0, json.Length - 1); json += "],"; } json = json.Substring(0, json.Length - 1); json += "]);"; } catch (Exception ex) { throw new Exception(ex.Message); } StringBuilder sb = new StringBuilder(); sb.Append(json); return sb; } public DataSet GetStockData(string stockId) { //string sql = "select Cdate,KPJ,ZGJ,ZDJ,SPJ,JYL from CompanyStockDate where StockId=" + stockId + " and Cdate>=DATEADD(YY,-1,GETDATE()) order by Cdate asc"; string sql = "select Cdate,KPJ,ZGJ,ZDJ,SPJ,JYL from CompanyStockDate where StockId=" + stockId + " and Cdate>=DATEADD(m,-3,GETDATE()) order by Cdate asc"; DataSet ds = SqlHelper.Query(sql); return ds; } public bool IsReusable { get { return false; } } } }
