Highcharts使用=====經過指定日期顯示曲線

一、說明：

　　　　利用HighStock顯示曲線，在右上角的日期間隔選擇好日期後，從新請求後臺數據，從新加載曲線。

二、實現方法：

　　　　在HighStock的rangeSelector中有一個屬性inputDateParser，在這裏面能夠定義一個回調函數，當輸入完日期後，會調用這個函數。

三、日期的取得：

　　　　右鍵查看元素可知，開始日期的input有name=‘min’屬性，結束日期input有name='max'屬性。這樣只須要得到value只就能夠了。

四、代碼：

　　　　在回調函數中會用到，本身調用本身，所以定義了func()函數，以便在回調函數中使用。本例在回調函數中只是模擬，原理是同樣的，只要把ajax發送的數據改成min、max就能夠了。在後臺，接收日期查詢數據返回數據。

 1  $(function () {
 2         $.getJSON("/handler1.ashx", function func(dt) {
 3             var data=[];
 4             Highcharts.setOptions({
 5                 global: {
 6                     useUTC:false
 7                 }
 8 
 9 
10             });
11             for (var i = 0; i < dt.length; i++) {
12                 data.push([Date.parse(dt[i]["Time"]), Number(dt[i]["Value"])]);
13             }
14             $('#highstock').highcharts('StockChart', {
15                
16                 credits: {
17                     enabled:false
18                 },
19 
20                 navigator: {
21                     enabled: $(window).width() > 640
22                 },
23 
24                
25                 rangeSelector: {
26                     selected: 1,
27                     inputDateFormat: '%Y-%m-%d',
28                     enabled: true,
29                     inputDateParser:function () {
30                         $.ajax({       //實現點擊日期框  再次選擇數據
31                             url: '/handler1.ashx',
32                             dataType: 'json',
33                             data:'min=45',
34                             success:function(ds) {
35                                 func(ds);
36                             }
37                         });
38                         
39                     }
40                 },
41 
42 
43                 series: [{
44                     name: '持倉量',
45                     data: data,
46                     tooltip: {
47                         valueDecimals: 2
48                     }
49                 }],
50                 tooltip: {
51                     formatter: function () {
52                         var tip = "";
53                         tip += Highcharts.dateFormat("%Y年%m月%d日", this.points[0].point.x, false) + "<br/>";
54                         tip += "淨持倉:" + this.points[0].point.y.toFixed(2) + "噸<br/>";
55                         return tip;
56 
57                     }
58                 },
59                 yAxis: {
60                    
61                     gridLineColor: '#ccc',
62                    
63                     labels: {
64                         formatter: function () {
65                             return this.value + "噸";
66                         }
67                     }
68                 }
69             });
70         });
71 
72     });

　　　　　　後臺代碼：接收到「45」說明是，點擊日期選擇框了，返回前2條數據。實際使用中，接收min、max日期，拼where條件查詢數據返回。

　　　　　　　string min = context.Request["min"]??"";
            string sql;
            if (min=="45")
            {
                sql = "select top(2)Time,Value from TableTest order by Time";
            }
            else
            {
                 sql= "select Time,Value from TableTest order by Time";
            }
            
            DataTable dt=SqlDbHelper.ExecuteDataTable(sql);
           
            context.Response.Write(JsonConvert.SerializeObject(dt));