highcharts 調用 json

時間  2019-11-29
標籤 highcharts 調用 json 欄目 JavaScript 简体版
原文   原文鏈接

Highcharts結合Asp.net實現動態數據股票式圖形顯示實例 .【轉】

本實例針對的具體應用行情是我須要定時從數據庫中讀取某商品價格,而後以圖形顯示在網頁上,相似於股票中的交易品種價格走勢圖.javascript

我使用的是asp.net,結合jQuery中的Highcharts插件實現,該插件能夠支持不少類型的圖形,但都是靜態的,提供的實例都須要改造,有興趣的朋友能夠去Highcharts官網看看(http://www.highcharts.com/),裏面提供了不少的Demo,說實在的要實現個人需求,更應該使用Highstock,可是看了Highcharts的dynamic-update實例,也能夠實現個人需求界面更加簡潔些,因此本文采用的是Highcharts中dynamic-update模型,圖形類型是spline最終實現的效果貼圖以下（品旗金這個品種的價格是10秒種更新一次的,每10秒對線狀圖形加一個點）:html

實現步聚:java

用vs新建一web網站,新建asp.net頁面DynamicUpdate.aspx,頁面代碼以下:jquery

 

[html] view plain copy print ?
  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表示顯示容器,web

events表示容器須要註冊的事件,其中的load表示在加載完成以後發生,這裏在load中設置了一個js計時器,10秒鐘發生一次,裏面的代碼就是經過jQuery 中的ajax向跟DynamicUpdate.aspx頁面在同一根目錄下的 ajaxhandler文件夾的dataupdate.ashx文件請求最新一條的品旗金(GOLD)品種的價格數據,這裏在ajax的url中爲什麼要加 randomCode + "=" + oldrandomCode是由於加一個隨機數能夠避免緩存,而flag=1則是由於個人dataupdate.ashx文件要接受多個不一樣的ajax的請求,因此用flag區分一下ajax

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屬性json

series表示顯示在容器中全部曲線的合集,這裏我只顯示一條曲線,name表示曲線的名稱,data表示該條曲線一系列座標點的集合,x在前,y在後,它是一個js數組,本例中因爲x軸顯示的是時間,所以須將數組對象的x屬性設置爲時間,可是Highcharts中並非直接將時間賦給x軸,而是將從1970-1-1到某個時間之間的毫秒數來賦給x軸表示這個時間,因此必須用getTime()方法,y軸座標點的形式必須是 y = 較小數字 * 整數的形式,也沒有摸透Highcharts爲什麼必須這樣,因爲本實例中品種的價格數據通常是通常多左右,因此只好在獲取數據時除以200，而後再給y軸賦值時再乘以200。api

 

頁面代碼中的<%= jsonstr %>是我須要從服務器獲取的初始數據,以初始化圖形，頁面的cs代碼以下(DynamicUpdate.aspx.cs):數組

 

[csharp] view plain copy print ?
  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 print ?
  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.         } 
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程