[转载]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,页面代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicUpdate.aspx.cs" Inherits="WebImg.DynamicUpdate" %> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>动态显示价格图例</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { $(document).ready(function () { Highcharts.setOptions({ global: { useUTC: false } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', marginRight: 10, events: { load: function () { // set up the updating of the chart each second var series = this.series[0]; setInterval(function () { var randomCode = parseInt(Math.random() * 10000); var oldrandomCode = parseInt(Math.random() * 10000); $.ajax({ url: "ajaxhandler/dataupdate.ashx?" + randomCode + "=" + oldrandomCode + "&flag=1", type: "get", dataType: "json", success: function (data, textStatus, XMLHttpRequest) { var ctime = new Date(); ctime.setTime(parseInt(data.rows[0].times)); var x = ctime.getTime(), // current time y = data.rows[0].price * 200; series.addPoint([x, y], true, true); }, error: function () { } }); }, 10000); } } }, title: { text: '品旗撮合交易市场品种行情' }, xAxis: { title: { text: '时间' }, type: 'datetime', tickPixelInterval: 150, labels:{formatter:function(){ var vDate = new Date(this.value); return vDate.getHours()+":"+vDate.getMinutes()+":"+vDate.getSeconds(); }} }, yAxis: { title: { text: '价格' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, credits:{ text:'品旗金属交易市场', url:'http://www.inv6.com' }, series: [{ name: '品旗金(GOLD)', data: (function () { var data = [], i; var jsonData = <%= jsonstr %>; for (i = -19; i <= 0; i++) { var ctime = new Date(); ctime.setTime(parseInt(jsonData.rows[i+19].time1)); data.push({ x: ctime.getTime(), y: jsonData.rows[i + 19].price * 200 }); } return data; })() }] }); }); }); </script> </head> <body> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"> </div> </body> </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之间,或者你也可以设置yAxis的max或min属性
series表示显示在容器中所有曲线的合集,这里我只显示一条曲线,name表示曲线的名称,data表示该条曲线一系列坐标点的集合,x在前,y在后,它是一个js数组,本例中由于x轴显示的是时间,因此须将数组对象的x属性设置为时间,但是Highcharts中并不是直接将时间赋给x轴,而是将从1970-1-1到某个时间之间的毫秒数来赋给x轴表示这个时间,所以必须用getTime()方法,y轴坐标点的形式必须是 y = 较小数字 * 整数的形式,也没有摸透Highcharts为何必须这样,由于本实例中品种的价格数据一般是一般多左右,所以只好在获取数据时除以200，然后再给y轴赋值时再乘以200。
页面代码中的<%= jsonstr %>是我需要从服务器获取的初始数据,以初始化图形，页面的cs代码
public string jsonstr = ""; protected void Page_Load(object sender, EventArgs e) { getData(); } private void getData() { DataTable dtPrice = SQLDBHelper.ExecuteTable("select top 20 TMPCode,TMPTime,TMPPrice from TabMerPrice with(nolock) order by TMPTime desc"); string json = "{\"rows\":["; for (int i = (dtPrice.Rows.Count-1); i >= 0; i--) { json += "{\"time1\":\"" + (Convert.ToDateTime(dtPrice.Rows[i]["TMPTime"]).AddHours(-8) - new DateTime(1970, 1, 1)).TotalMilliseconds + "\",\"price\":\"" + (Convert.ToDecimal(dtPrice.Rows[i]["TMPPrice"])/200) + "\"},"; } json = json.TrimEnd(','); json += "]}"; jsonstr = json; }
其中TabMerPrice表是品种价格信息表,TMPTime时间,TMPPrice价格,TMPTime的时间间隔是十秒,我用数据库作业生成该表的记录,十秒钟发生一次
AddHours(-8)是为了将时间转换为北京时间,生成的数据格式是json格式
dataupdate.ashx代码如下:
public void ProcessRequest(HttpContext context) { string flag = context.Request.QueryString["flag"].ToString(); switch (flag) { case "1"://获取品种当前价格 GetMerPrice(context); break; } } private void GetMerPrice(HttpContext context) { context.Response.Clear(); context.Response.Buffer = true; context.Response.ContentType = "application/json"; context.Response.ContentEncoding.GetBytes("utf-8"); DataTable dtPrice = SQLDBHelper.ExecuteTable("select top 1 TMPCode,TMPTime,TMPPrice from TabMerPrice with(nolock) order by TMPTime desc"); string json = "{\"rows\":["; json += "{\"times\":\"" + (Convert.ToDateTime(dtPrice.Rows[0]["TMPTime"]).AddHours(-8) - new DateTime(1970, 1, 1)).TotalMilliseconds + "\",\"price\":\"" + (Convert.ToDecimal(dtPrice.Rows[0]["TMPPrice"]) / 200) + "\"}"; json = json.TrimEnd(','); json += "]}"; context.Response.Write(json); context.Response.Flush(); context.Response.End(); }
大致的实现步聚就是这样,该实例能实现对服务端数据的实时显示,并用类似于股票格式的图形将价格显示出来
