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=="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));