asp.net 制作K线图——highstock

最新推荐文章于 2020-11-09 10:56:33 发布
最新推荐文章于 2020-11-09 10:56:33 发布
阅读量5.4k 收藏 4
点赞数 3
分类专栏： .net B/S 文章标签： highstock highcharts k线图 asp.net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zai_yuzhong/article/details/19557337
版权

highcharts是一款非常不错的开源的js绘图工具，我们所需要做的就是用他能听懂的语言告诉他怎么做，剩下的事情就交给highcharts了。

废话不多说步入正题。

1.从highcharts官网下载Highstock.js

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;
            }
        }
    }
}
效果如下



天蝎座小混混
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
highstock K线图 深入研究
小江的专栏
06-03 2万+
好久没写博客了，这次来个质量点的。
PHP使用HighChart生成股票K线图详解
热门推荐
飞鱼
12-14 1万+
详解PHP使用highchart（highstock）绘制股票的K线图。如何部署插件、如何显示插件，如何加载数据，如何汉化，以及控制器动作应该怎么写等等。
Mschart asp.net 画K线图
02-26
用Mschart控件在asp.net网页上画股票的K线图 希望对你有帮助
Highstock生成股票K线图
GBin1.com
10-15 2334
在线演示 本地下载 使用HightStock生成股票K线图例子。
一起谈.NET技术，WPF中使用amCharts绘制股票K线图
weixin_33712881的博客
09-01 144
　　本想自己用GDI绘图, 通过数据直接绘制一张蜡柱图, 但觉得这样子的功能比较少, 所以到网上搜索一些能画出K线图的控件. 发现DynamicDataDisplay挺好的, 在它的开发截图里也发现可以绘制蜡柱图, 但文档好像做的不是很好, 不知道怎么用它来画, 在寻找它比较好的例子的时候发现有人推荐用amCharts绘制, 所以便去看了一下, 发现挺好用的, 效果如下: 　　准备工作 　　先要...
asp实现k线图(在线)
天道酬勤
11-24 1658
可以考虑使用MSCHART，但是缺点是显示不太好看，不很专业，同时，如果客户端没有装的话就比较麻烦，因为显示不出来，所以一般的网站都采用生成图片的方式。下面给出MSCHART的一些东西，可以自己考虑着使用，我没有使用过其他的控件，所以不能给你满意的答复。另外附给你一个网址，www.tjinfo.com,里面有个调查题，使用了MSCHART，但是没有用折线，这个你可以自己定义的，CSDN
ASP.NET在线英语自学系统——课程及自测管理的设计(源代码+论文).rar
最新发布
04-05
ASP.NET在线英语自学系统——课程及自测管理的设计(源代码+论文).rar
ASP.NET在线英语自学系统——课程及自测管理的设计(源代码+论文).zip
01-07
ASP.NET在线英语自学系统——课程及自测管理的设计(源代码+论文).zip
ASP.NET毕业设计——ASP.NET在线英语自学系统——课程及自测管理的设计(源代码+论文).zip
09-15
ASP.NET毕业设计
k线图示列--基于HIGHSTOCK
weixin_33738578的博客
12-06 157
为什么80%的码农都做不了架构师？>>> ...
C# .net 股票 K线图 指标 画线 网上多个版本合集
12-15
C# .net 股票 K线图 指标 画线 网上多个版本合集 都在有源代码的 大家可以随便下来看看
zedgraph中K线图在.net中的应用
08-06
在.net中使用zedgraph绘制股票K线图
股票K线图控件
01-16
给公司做的K线图控件，用来显示股票的价格的。采用visual c++ 开发，本人没有写太多的文档，不过代码里面有一定的注释。由于要测试，本工程是个可执行文件的工程，需要的人可以只copy里面的头文件和C++文件，不一定要按照我的测试界面那样做。
TeechartK线图,图形设置 自由作图的工具 中文帮助文档
10-21
TeechartK线图,图形设置 自由作图的工具 中文帮助文档
k线图插件（兼容手机端、平板）
07-17
自己用过的K线图插件 纯js的 我是移动端用的 兼容移动端
C#画K线实现加载不同股票和5,10,20,60均线
csdn2020114的博客
11-09 582
//按钮加载K线 private void button1_Click(object sender, EventArgs e) { if (this.comboBox1.Text == “热点”) { gpname = “zhy” + this.textBox1.Text.Trim(); } else { gpname =this.textBox1.Text.Trim(); } if (gpname != “zhy”) { int count = 10; half = count; //string j..
StockPriceMonitor:简单的脚本来监视指定库存，只是为了好玩
05-17
股票价格监控器 监视指定库存的简单脚本。 npm安装 修改stock.js中的股票代码。 （STOCK_CODE） 节点stock.js
ASP.NET动态网站课程设计——个人网页
05-18
好的，ASP.NET动态网站课程设计，个人网页是一个非常有趣和实用的项目。下面是一个简单的实现方案： 1. 设计页面布局：可以使用HTML和CSS来设计页面布局，包括导航栏、页脚、内容区等。 2. 选择数据库：可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值