Highcharts使用=====通过指定日期显示曲线

1、说明：

　　　　利用HighStock显示曲线，在右上角的日期间隔选择好日期后，重新请求后台数据，重新加载曲线。

2、实现方法：

　　　　在HighStock的rangeSelector中有一个属性inputDateParser，在这里面可以定义一个回调函数，当输入完日期后，会调用这个函数。

3、日期的取得：

　　　　右键查看元素可知，开始日期的input有name=‘min’属性，结束日期input有name='max'属性。这样只需要获得value只就可以了。

4、代码：

　　　　在回调函数中会用到，自己调用自己，因此定义了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));

 

posted @ 2015-07-14 22:42  随缘梦中人  阅读(3101)  评论(1)  编辑  收藏  举报