在 Asp.net 中使用 DataTable 作為 Highcharts 資料來源

Highcharts 是很強大的圖表套件

但由於是使用 javascript 的關係

操作上仍有許多不便之處

工程蝨希望把 DataTable 的資料
傳遞給javascript 
作為 Highcharts 的來源資料


以下是工程蝨的做法

C# Code

[System.Web.Services.WebMethod(EnableSession = true)]

    public static dynamic GetTrendData()

    {

        if (System.Web.HttpContext.Current.Session["datatable"] != null)

        {

            string title = System.Web.HttpContext.Current.Session["graphtitle"].ToString();  // Highcharts 顯示的title

            DataTable dt = (DataTable)System.Web.HttpContext.Current.Session["datatable"]; // 目的DataTable

            List<string> time = new List<string>();

            List<double> produce = new List<double>();

            List<double> sale = new List<double>();

            foreach (DataRow dr in dt.Rows)

            {

                time.Add(dr["Date"].ToString());

                produce.Add(double.Parse(dr["ProduceQty"].ToString()));

                sale.Add(double.Parse(dr["SellQty"].ToString()));

            }

            var series = new dynamic[]

            {

                new { name="time", data = time.ToArray()},

                new { name="銷售量", color="#FF00FF", data = sale.ToArray()},

                new { name="生產量", data = produce.ToArray()},

                new { name=title }

            };

            System.Web.HttpContext.Current.Session.Remove("datatable");

            return new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(series);

        }

1. 透過 Session 將 DataTable 傳遞給 WebMethod
2. 將 DataTable 轉成 List
3. 將 List 轉成 Highcharts 格式的 dynamic
4. 以 JavaScriptSerializer.serialize() 編碼為JSON字串後回傳

JavaScript Code

    function Query() {

        $.ajax({

            type: 'POST',

            async: false,

            contentType: "application/json",

            url: "ProduceTrend.aspx/GetTrendData", //Call C# function

            //data: {}, // 傳入function 參數

            dataType: "json",

            beforeSend: function () {

            },

            success: function (data) {

                if (data) {

                    var json = $.parseJSON(data.d);

                    var seriesArr = [];

                    var now = new Date();

                    seriesArr.push(json[1]);

                    seriesArr.push(json[2]);

                    $('#container').highcharts({

                        chart: {

                            type: 'line'

                        },

                        title: { text: '產銷趨勢圖  ' + json[3]["name"] },

                        xAxis: { 

                            categories: json[0]["data"],

                            labels: { rotation: -10, style: { fontSize: '14px', fontFamily: '新細明體, 新細明體' },

                            title: { text: '時間', align: 'high' },

                            step: 4 }

                        },

                        yAxis: {

                            allowDecimals: true, 

                            title: { text: '公噸' }, 

                            min: 0

                        },

                        series: seriesArr

                    });

                }

            },

            error: function (errorMsg) {

                alert('display graph fail.');

            }

        });

1. 使用 JQuery.ajax 呼叫 WebMethod 取得資料
2. 使用 JQuery.parseJSON 解碼為JSON字串
3.  將欲使用的 JSON資料加至 Javascript 陣列元件
4. 將 Javascript 陣列指定至 Highcharts 的 series