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

歡迎大家共同交流！