Highcharts结合Asp.net实现动态数据股票式图形显示实例

本实例针对的具体应用行情是我需要定时从数据库中读取某商品价格,然后以图形显示在网页上,类似于股票中的交易品种价格走势图.

我使用的是asp.net,结合jQuery中的Highcharts插件实现,该插件可以支持很多类型的图形,但都是静态的,提供的实例都需要改造,有兴趣的朋友可以去Highcharts官网看看(http://www.highcharts.com/),里面提供了很多的Demo,说实在的要实现我的需求,更应该使用Highstock,但是看了Highcharts的dynamic-update实例,也可以实现我的需求界面更加简洁些,所以本文采用的是Highcharts中dynamic-update模型,图形类型是spline最终实现的效果贴图如下品旗金这个品种的价格是10秒种更新一次的,每10秒对线状图形加一个点):

实现步聚:

用vs新建一web网站,新建asp.net页面DynamicUpdate.aspx,页面代码如下:

[html]  view plain copy
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicUpdate.aspx.cs"  
  2.     Inherits="WebImg.DynamicUpdate" %>  
  3.   
  4. <!DOCTYPE HTML>  
  5. <html>  
  6. <head>  
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  8.     <title>动态显示价格图例</title>  
  9.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
  10.     <script type="text/javascript">  
  11.    $(function () {  
  12.        $(document).ready(function () {  
  13.            Highcharts.setOptions({  
  14.                global: {  
  15.                    useUTC: false  
  16.                }  
  17.            });  
  18.            var chart;  
  19.            chart = new Highcharts.Chart({  
  20.                chart: {  
  21.                    renderTo: 'container',  
  22.                    type: 'spline',  
  23.                    marginRight: 10,  
  24.                    events: {  
  25.                    load: function () {  
  26.                    // set up the updating of the chart each second  
  27.                    var series = this.series[0];  
  28.                    setInterval(function () {  
  29.                                   var randomCode = parseInt(Math.random() * 10000);  
  30.                                   var oldrandomCode = parseInt(Math.random() * 10000);  
  31.                                   $.ajax({  
  32.                                     url: "ajaxhandler/dataupdate.ashx?" + randomCode + "=" + oldrandomCode + "&flag=1",  
  33.                                     type: "get",  
  34.                                     dataType: "json",  
  35.                                     success: function (data, textStatus, XMLHttpRequest) {  
  36.                                         var ctime = new Date();  
  37.                                         ctime.setTime(parseInt(data.rows[0].times));  
  38.                                         var x = ctime.getTime(), // current time  
  39.                                         y = data.rows[0].price * 200;  
  40.                                         series.addPoint([x, y], true, true);  
  41.                                     },  
  42.                                     error: function () { }  
  43.                                    });  
  44.                    }, 10000);  
  45.                    }  
  46.                }  
  47.            },  
  48.            title: {  
  49.                text: '品旗撮合交易市场品种行情'  
  50.            },  
  51.            xAxis: {  
  52.                         title: {  
  53.                                 text: '时间'  
  54.                             },  
  55.                type: 'datetime',  
  56.                tickPixelInterval: 150,  
  57.                         labels:{formatter:function(){  
  58.                             var vDate = new Date(this.value);  
  59.                             return vDate.getHours()+":"+vDate.getMinutes()+":"+vDate.getSeconds();  
  60.                         }}  
  61.            },  
  62.            yAxis: {  
  63.                title: {  
  64.                    text: '价格'  
  65.                },  
  66.                plotLines: [{  
  67.                    value: 0,  
  68.                    width: 1,  
  69.                    color: '#808080'  
  70.                }]  
  71.            },  
  72.            tooltip: {  
  73.                formatter: function () {  
  74.                    return '<b>' + this.series.name + '</b><br/>' +  
  75.                         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +  
  76.                         Highcharts.numberFormat(this.y, 2);  
  77.                }  
  78.            },  
  79.            legend: {  
  80.                enabled: false  
  81.            },  
  82.            exporting: {  
  83.                enabled: false  
  84.            },  
  85.                     credits:{  
  86.                         text:'品旗金属交易市场',  
  87.                         url:'http://www.inv6.com'  
  88.                     },  
  89.            series: [{  
  90.                name: '品旗金(GOLD)',  
  91.                data: (function () {  
  92.                    var data = [],  
  93.                             i;  
  94.                             var jsonData = <%= jsonstr %>;  
  95.                    for (i = -19; i <= 0; i++) {  
  96.                                 var ctime = new Date();  
  97.                                 ctime.setTime(parseInt(jsonData.rows[i+19].time1));  
  98.                        data.push({  
  99.                             x: ctime.getTime(),  
  100.                                      y: jsonData.rows[i + 19].price * 200  
  101.                        });  
  102.                    }  
  103.                    return data;  
  104.                })()  
  105.            }]  
  106.        });  
  107.    });  
  108. });  
  109.     </script>  
  110. </head>  
  111. <body>  
  112.     <script src="http://code.highcharts.com/highcharts.js"></script>  
  113.     <script src="http://code.highcharts.com/modules/exporting.js"></script>  
  114.     <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">  
  115.     </div>  
  116. </body>  
  117. </html>  

Highcharts的属性中renderTo表示显示容器,

events表示容器需要注册的事件,其中的load表示在加载完成之后发生,这里在load中设置了一个js计时器,10秒钟发生一次,里面的代码就是通过jQuery 中的ajax向跟DynamicUpdate.aspx页面在同一根目录下的ajaxhandler文件夹的dataupdate.ashx文件请求最新一条的品旗金(GOLD)品种的价格数据,这里在ajax的url中为何要加randomCode + "=" + oldrandomCode是因为加一个随机数可以避免缓存,而flag=1则是因为我的dataupdate.ashx文件要接受多个不同的ajax的请求,所以用flag区分一下

xAxis表示针对容器的x轴进行定义的的属性合集,type表示显示的文本类型,可选,这里我填写的是时间类型,这里注意实例默认采用的是GMT时间,也可以使用UTC时间,但我们一般都采用的是北京时间,(GMT or UTC)+8小时 = 北京时间,因此当我们用ajax获取的时间是北京时间时,应在小时上减去8小时(这里我还要分享一条经验,如何将服务器时间转换为.getTime()方法可以使用的js时间,那就是将服务器时间减去1970-1-1,将剩下的天数转换为毫秒数,然后在js中通过setTime方法给新初始化的时间赋值,我发现js中直接用new Date(年,月,日,时,分,秒,毫秒)的形式初始化一个js时间用getTime()获取到的结果是不正确的,至于为什么要减去1970-1-1,这是因为getTime()方法的定义就是获取从当前时间从1970-1-1后的毫秒数),当x轴显示的不是时间时或需要自己定义时,也可以通过categories属性来定义,tickPixelInterval表示x轴的密度,labels则用来格式化x轴的显示格式

yAxis表示针对容器的y轴进行定义的属性合集,大致与x轴的属性是一样的,但是在Highcharts中是无法通过categories定义y轴的固定值的,Highcharts的y轴是根据给出的坐标点数据自动生成的,这取决于series属性的data子属性,比如当你给data所赋值的最大值是300,最小值是100,那么y轴的显示将从100到300之间,或者你也可以设置yAxismax或min属性

series表示显示在容器中所有曲线的合集,这里我只显示一条曲线,name表示曲线的名称,data表示该条曲线一系列坐标点的集合,x在前,y在后,它是一个js数组,本例中由于x轴显示的是时间,因此须将数组对象的x属性设置为时间,但是Highcharts中并不是直接将时间赋给x轴,而是将从1970-1-1到某个时间之间的毫秒数来赋给x轴表示这个时间,所以必须用getTime()方法,y轴坐标点的形式必须是 y = 较小数字 * 整数的形式,也没有摸透Highcharts为何必须这样,由于本实例中品种的价格数据一般是一般多左右,所以只好在获取数据时除以200,然后再给y轴赋值时再乘以200。


页面代码中的<%= jsonstr %>是我需要从服务器获取的初始数据,以初始化图形,页面的cs代码如下(DynamicUpdate.aspx.cs):

[csharp]  view plain copy
  1. public string jsonstr = "";  
  2.         protected void Page_Load(object sender, EventArgs e)  
  3.         {  
  4.             getData();  
  5.         }  
  6.         private void getData()  
  7.         {  
  8.             DataTable dtPrice = SQLDBHelper.ExecuteTable("select top 20 TMPCode,TMPTime,TMPPrice from TabMerPrice with(nolock) order by TMPTime desc");  
  9.             string json = "{\"rows\":[";  
  10.             for (int i = (dtPrice.Rows.Count-1); i >= 0; i--)  
  11.             {  
  12.                 json += "{\"time1\":\"" + (Convert.ToDateTime(dtPrice.Rows[i]["TMPTime"]).AddHours(-8) - new DateTime(1970, 1, 1)).TotalMilliseconds + "\",\"price\":\"" + (Convert.ToDecimal(dtPrice.Rows[i]["TMPPrice"])/200) + "\"},";  
  13.             }  
  14.             json = json.TrimEnd(',');  
  15.             json += "]}";  
  16.             jsonstr = json;  
  17.         }  

其中TabMerPrice表是品种价格信息表,TMPTime时间,TMPPrice价格,TMPTime的时间间隔是十秒,我用数据库作业生成该表的记录,十秒钟发生一次

AddHours(-8)是为了将时间转换为北京时间,生成的数据格式是json格式

dataupdate.ashx代码如下:

[csharp]  view plain copy
  1. public void ProcessRequest(HttpContext context)  
  2.         {  
  3.             string flag = context.Request.QueryString["flag"].ToString();  
  4.             switch (flag)  
  5.             {  
  6.                 case "1"://获取品种当前价格  
  7.                     GetMerPrice(context);  
  8.                     break;  
  9.             }  
  10.         }  
  11.         private void GetMerPrice(HttpContext context)  
  12.         {  
  13.             context.Response.Clear();  
  14.             context.Response.Buffer = true;  
  15.             context.Response.ContentType = "application/json";  
  16.             context.Response.ContentEncoding.GetBytes("utf-8");  
  17.             DataTable dtPrice = SQLDBHelper.ExecuteTable("select top 1 TMPCode,TMPTime,TMPPrice from TabMerPrice with(nolock) order by TMPTime desc");  
  18.             string json = "{\"rows\":[";  
  19.             json += "{\"times\":\"" + (Convert.ToDateTime(dtPrice.Rows[0]["TMPTime"]).AddHours(-8) - new DateTime(1970, 1, 1)).TotalMilliseconds + "\",\"price\":\"" + (Convert.ToDecimal(dtPrice.Rows[0]["TMPPrice"]) / 200) + "\"}";  
  20.             json = json.TrimEnd(',');  
  21.             json += "]}";  
  22.             context.Response.Write(json);  
  23.             context.Response.Flush();  
  24.             context.Response.End();  
  25.         }  

大致的实现步聚就是这样,该实例能实现对服务端数据的实时显示,并用类似于股票格式的图xing

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Highstock 是用纯 JavaScript 编写的股票表控件,可以开发股票走势或大数据量的时间轴表。它包含多个高级导航组件:预设置数据时间范围,日期选择器、滚动条、平移、缩放功能。 主要优势(功能特点) browsers兼容性 Highstock 可以在所有的移动设备及电脑上的浏览器中使用,包括 iPhone,iPad 和 IE6 以上的版本。在 IOS 和 Android 系统中 Highstock 支持多点触摸功能,因而可以给您提供极致的用户体验。在现代的浏览器中使用 SVG 技术进行图形绘制,在低版本 IE 则使用 VML 进行图形绘制。 free非商业使用免费 在个人网站、学校网站及非盈利机构中使用 Highstock 完全不需要经过我们的许可,直接可以任意使用! 商业网站或网站,请查看我们的 使用协议及价格。 open开源 Highstock 最重要的特点之一就是:无论免费版还是付费版,你都可以下载源码并可以对其进行编辑。 基于开源社区我们可以第一时间获取用户的需求、Bug 修复及吸收社区贡献。 no-backend纯 JavaScript Highstock 完全基于 HTML5 技术,不需要再客户端安装任何插件,如 Flash 或 Java。此外你也不用配置任何服务端环境,不需要 PHP、Tomcat、ASP.NET 等,只需要两个 JS 文件即可运行。 chart-types表种类丰富 Highstock 支持直线、折线、面积、面积曲线、柱形、散点、蜡烛(OHLC)、K线、标签、面积范围、柱形范围等多种表, 其中很多表可以集成在同一个图形中形成混合 config-syntax简单的配置语法 在 Highstock 中设置配置选项不需要任何高级的编程技术,所有的配置都是 JSON 对象,只包含用冒号连接的键值对、用逗号进行分割、用括号进行对象包裹。JSON 具有易于人阅读和编写,同时也易于机器解析和生成的特点。 动态交互性 Highstock 支持丰富交互性,在表创建完毕后,可以用丰富的 API 进行添加、移除或修改数据列、数据点、坐标轴等操作。 结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 范围选择器 在处理大数据集时,我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择器,方便的用它来选择预设范围的时间,例如 1个月、一季度、1年等,你可以通过时间输入框来选择自己想要查看数据范围。 滚动条和导航器 通过滚动条和导航器可以更加直观的操作和查看特定范围的数据。 事件标记 通过添加标志数据列可以为数据相关的事件做标记和注释。 支持多坐标轴 多个数据进行对比这是非常常见的需求,Highstock 可以让你为每个类型的数据添加坐标轴,每个轴可以定义放置的位置,所有的设置都可以独立生效,包括旋转、样设计和定位,当然也支持多个数据共用一个坐标轴。 tooltip数据提示框 当鼠标划过图形时,Highstock 可以将数据点或数据列的信息展示在提示框中,并且提示框会跟随用户的鼠标;我们做了大量工作,可以智能的显示离鼠标最近的点或被遮盖点的信息。 datetime时间轴 Highstock 对时间轴的处理非常智能,可以精确的计算出月、周、日、小时、分钟等时间刻度的位置。 data grouping数据分组与合并 如果数据集包含 10 万个,浏览器对每个点进行计算并渲染的话效率会非常低。Highstock 具有数据分类功能,可以以飞速的进行数据分组;放大至小范围的数据是会重新分组,因为你可以查看高度清晰的数据又不失效率和速度。 exporting导出和打印 Highstock 支持导出功能,用户可以一键导出 PNG、JPEG、PDF 或 SVG 文件,通过插件可以实现导出为 Excel 文件功能;另外,用户还可以从网页上直接打印表。 zooming缩放和平移 除了通过滚动条或导航器控制放大和平移功能,你还可以通过鼠标和手指来进行这两个操作。 ajax方便加载外部数据 Highstock 的数据是 JavaScript 数组或对象,这些数据可以是本地的配置对象,独立的数据文件(JSON、CVS)甚至是不同的网站上定义。另外,这些数据可以用任何形处理好并加载到 Highstock 中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值