ASP.NET中通过WebService获取数据来使用Highcharts图表控件

ASP.NET中通过WebService获取数据来使用Highcharts图表控件

Highcharts 官网：http://www.highcharts.com

Highcharts 官网示例：http://www.highcharts.com/demo/

Highcharts 官网文档：http://www.highcharts.com/documentation/how-to-use

Highcharts 官网参考手册：http://www.highcharts.com/ref/#credits--enabled

 

具体代码：

 WebService代码：

 

 

public   class  Chats : System.Web.Services.WebService
{
        [WebMethod(EnableSession  =   true )]
         public  IQueryable < Charts >  VendasMensais()
        {
            ChartsRepository cr  =   new  ChartsRepository();
             return  cr.Orders( 33 ,  10 ,  2010 );;
        }
}

 

 

public   class  Charts
    {
         public   int  ValueX {  get ;  set ; }
         public   decimal  ValueY {  get ;  set ; }
    }
     public   class  ChartsRepository
    {

         public  IQueryable < Charts >  Orders( int ?  idVendedor,  int ?  mes,  int ?  ano)
        {
            var _contexto  =   new  RIAEntities();
            IQueryable < Charts >  sql;
             if (idVendedor.HasValue)
            {
                sql  =  from vendas  in  _contexto.Encomendas
                           where
                              vendas.IDvendedor  ==  idVendedor  &&  vendas.Registada.Month  ==  mes  &&
                              vendas.Registada.Year  ==  ano
                          select
                               new  Charts()
                                  {ValueX  =  vendas.Registada.Day, ValueY  =  vendas.TotalLiquido};
            }
             else
            {
                sql  =  from vendas  in  _contexto.Encomendas
                                          where
                                             vendas.Registada.Month  ==  mes  &&  vendas.Registada.Year  ==  ano
                                         select
                                              new  Charts() { ValueX  =  vendas.Registada.Day, ValueY  =  vendas.TotalLiquido };
            }
             return  sql;
        }
    }

 

 前台脚本调用：

 

< script type = " text/javascript " >
    $(document).ready( function  () {

        chartOjb  =   new  Object();
        $.ajax({
            type:  " POST " ,
            url:  " ../WebServices/Chats.asmx/VendasMensais " ,
            data:  ' { } ' ,
            contentType:  " application/json; charset=utf-8 " ,
            dataType:  " json " ,
            success:  function  (msg) {
                 var  chart  =  msg.d;
                $.each(chart,  function  (index, aux) {
                    chartOjb.name  =  aux.ValueX;
                    chartOjb.data  =  aux.ValueY;
                    alert(chartOjb.name  +   " / "   +  chartOjb.data);
                })
            },
            failure:  function  (response) {
                alert(response);
            }

        });
        chart1  =   new  Highcharts.Chart({
            chart: {
                renderTo:  ' vendasMensais ' ,
                defaultSeriesType:  ' bar '
            },
            title: {
                text:  ' Fruit Consumption '
            },
            xAxis: {
                categories: [ ' Apples ' ,  ' Bananas ' ,  ' Oranges ' ]
            },
            yAxis: {
                title: {
                    text:  ' Fruit eaten '
                }
            },
            series: chartOjb
        }); 
    });
< / script>

 

 

另附广告：女朋友的淘宝网店，为她做宣传，希望大家别介意，http://iyseek.taobao.com  欢迎大家逛逛，嘿嘿！

如有需要帮助，请联系MSN：[email protected]（上班时在线）   QQ：331773812

欢迎大家共同交流！