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

1、说明：

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

2、实现方法：

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

3、日期的取得：

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

4、代码：

　　　　在回调函数中会用到，自己调用自己，因此定义了func()函数，以便在回调函数中使用。本例在回调函数中只是模拟，原理是一样的，只要把ajax发送的数据改为min、max就可以了。在后台，接收日期查询数据返回数据。

  $(function () {
         $.getJSON("/handler1.ashx", function func(dt) {
             var data=[];
             Highcharts.setOptions({
                 global: {
                     useUTC:false
                 }

             });
             for (var i = 0; i < dt.length; i++) {
                 data.push([Date.parse(dt[i]["Time"]), Number(dt[i]["Value"])]);
             }
             $('#highstock').highcharts('StockChart', {

                 credits: {
                     enabled:false
                 },

                 navigator: {
                     enabled: $(window).width() > 640
                 },

                 rangeSelector: {
                     selected: 1,
                     inputDateFormat: '%Y-%m-%d',
                     enabled: true,
                     inputDateParser:function () {
                         $.ajax({       //实现点击日期框  再次选择数据
                             url: '/handler1.ashx',
                             dataType: 'json',
                             data:'min=45',
                             success:function(ds) {
                                 func(ds);
                             }
                         });

                     }
                 },

                 series: [{
                     name: '持仓量',
                     data: data,
                     tooltip: {
                         valueDecimals: 2
                     }
                 }],
                 tooltip: {
                     formatter: function () {
                         var tip = "";
                         tip += Highcharts.dateFormat("%Y年%m月%d日", this.points[0].point.x, false) + "<br/>";
                         tip += "净持仓:" + this.points[0].point.y.toFixed(2) + "吨<br/>";
                         return tip;

                     }
                 },
                 yAxis: {

                     gridLineColor: '#ccc',

                     labels: {
                         formatter: function () {
                             return this.value + "吨";
                         }
                     }
                 }
             });
         });

     });

　　　　　　后台代码：接收到“45”说明是，点击日期选择框了，返回前2条数据。实际使用中，接收min、max日期，拼where条件查询数据返回。

　　　　　　　string min = context.Request["min"]??"";
            string sql;
            if (min=="")
            {
                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));