利用Highcharts插件製做動態圖表

向你們推薦一款js插件，用於繪製圖表Highcharts，具體操做可參考官方網站：http://www.hcharts.cn/

1.以下爲本人制做的圖形效果以下，固然其效果遠不止這些，你們還能夠深刻研究！

 

 

2.下面我來說解下是如何製做的

首先須要下載並引入 highcharts.js 文件  <script src="../../Scripts/highcharts.js" type="text/javascript"></script>

 

3.後臺拼接hightchart所需的數據，以下爲datatable中的數據，產出面積SF和工時產出分別爲highcharts中的兩類數據

 　　　　　　　　　//按照highcharts可識別的格式來組裝datatable中的數據
　　　　　　　　　 StringBuilder categories = new StringBuilder();
　　　　　　　　　 //series_SF爲產出面積SF數據
                StringBuilder series_SF = new StringBuilder();
　　　　　　　　　//series_WH爲工時產出數據
                StringBuilder series_WH = new StringBuilder();
                Dictionary<string, string> objDic = new Dictionary<string, string>();
                //循環添加highchartsX，Y軸所需的數據
                for (int i = 2; i < table.Columns.Count; i++)
                {
　　　　　　　　　　　　//X軸所需的數據
                    categories.AppendFormat(table.Columns[i].ColumnName + ",");

　　　　　　　　　　　 //Y軸 產出面積SF所需的數據
                    if (string.IsNullOrEmpty(table.Rows[0][i].ToString()))
                    {
                        series_SF.AppendFormat("0,");
                    }
                    else
                    {
                        series_SF.AppendFormat(table.Rows[0][i].ToString() + ",");
                    }
　　　　　　　　　　　　//Y軸 工時產出所需的數據
                    if (string.IsNullOrEmpty(table.Rows[2][i].ToString()))
                    {
                        series_WH.AppendFormat("0,");
                    }
                    else
                    {
                        series_WH.AppendFormat(table.Rows[2][i].ToString() + ",");
                    }
                }
                //刪除最有一個多餘的","號
                if (table.Columns.Count > 0)
                {
                    categories.Remove(categories.Length - 1, 1);
                    series_SF.Remove(series_SF.Length - 1, 1);
                    series_WH.Remove(series_WH.Length - 1, 1);
                }
                objDic.Add("categories", categories.ToString());
                objDic.Add("series_SF", series_SF.ToString());
                objDic.Add("series_WH", series_WH.ToString());

　　　　　　　　　 //轉換爲json格式數據，返回給前臺界面
                return Common.JsonHelper.ToJson(objDic);

 

4.前臺接受數據

{"categories":"03/01,03/02,03/03,03/04,03/05,03/06,03/07,03/08,03/09,03/10,03/11,03/12,03/13,03/14,03/15,03/16,03/17,03/18,03/19,03/20",

"series_SF":"0,0,0,50.94,0,47.60,8.72,0,0,8.00,0,62.96,50.94,101.88,25.47,0,0,52.50,25.47,0",

"series_WH":"0.00,0.00,0.00,2.12,0.00,1.98,0.36,0.00,0.00,0.33,0.00,2.62,2.12,4.25,1.06,0.00,0.00,2.19,1.06,0.00"}

 

5.綁定並加載highcharts

　　　　　　　　　　　　//繪製兩個Y軸的混合圖
                    var options = {
                        chart: {
　　　　　　　　　　　　　　　　 //將該圖表綁定給id爲container_day的元素 如：<div id="container_day"  style="min-width:800px;height:400px;"></div>
                            renderTo: 'container_day',
　　　　　　　　　　　　　　　　//圖表類型
                            zoomType: 'xy'
                        },
                        title: {
 　　　　　　　　　　　　　　　　//圖表的標題 
                            text: '站別工時產出-日報'
                        },
                        xAxis: {
　　　　　　　　　　　　　　　　//X軸的值 在post中動態加載
                            categories: []
                        },
                        yAxis: [{
　　　　　　　　　　　　　　　　//Y軸的值 在post中動態加載
                            labels: {
                                style: {
                                    color: '#89A54E'
                                }
                            },
                            title: {
                                text: '產出面積SF',
                                style: { color: '#89A54E' }
                            }
                        }, {
                            title: {
                                text: '工時產出',
                                style: { color: '#4572A7' }
                            },
                            labels: {
                                style: {
                                    color: '#4572A7'
                                }
                            },
                            opposite: true
                        }],
                        tooltip: {
                            shared: true
                        },
　　　　　　　　　　　　　　//兩個Y軸的類別　　
                        series: []
                    };

                    //獲取折綫圖X,Y軸值
                    $.post("/PI/PDL_ProcTimeOut_highcharts", { "BDate": $("#BDate").datebox('getValue'), "EDate": $("#EDate").datebox('getValue'), "ProcCode": $("#ProcCode").combobox('getValue') }, function (data) {
                        var json = eval("(" + data + ")");
                        //綁定X軸
                        var categories = json.categories.split(',');
                        $.each(categories, function (itemNo, item) {
                            options.xAxis.categories.push(item);
                        });
                        //綁定Y軸
                        var series_SF = json.series_SF.split(',');
                        var series_WH = json.series_WH.split(',');


                        var series_0 = {
                            data: []
                        };
                        var series_1 = {
                            data: []
                        };

                        series_0.name = "產出面積SF";
                        series_0.color = "#4572A7";
                        series_0.type = "column",
                        $.each(series_SF, function (itemNo, item) {
                            series_0.data.push(parseFloat(item));
                        });

                        series_1.name = "工時產出";
                        series_1.color = "#89A54E";
                        series_1.type = "spline",
                        series_1.yAxis = 1,
                        $.each(series_WH, function (itemNo, item) {
                            series_1.data.push(parseFloat(item));
                        });

                        options.series.push(series_0);
                        options.series.push(series_1);

                        var chart = new Highcharts.Chart(options);
                    }); //end post