highcharts 圖表實例

            var series_values = "";

            var Dates = $("#hid_dates").val().split(',');
            //alert(Dates)
            $.ajax({
                type: "POST",
                url: "/Home/rpt_InfoStatistics",
                data: "",
                success: function (json) {
                    series_values = json;
                    $("#hid_series_values").val(json);
                    var jsons = JSON.parse(series_values);
                    $('#container').highcharts({
                        chart: {
                            type: 'line'
                        },
                        title: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: Dates
                        },
                        yAxis: {
                            title: {
                                text: '在線QQ數量 (個)'
                            }
                        },
                        plotOptions: {
                            line: {
                                dataLabels: {
                                    enabled: true          // 開啓數據標籤
                                },
                                enableMouseTracking: true // 關閉鼠標跟蹤，對應的提示框、點擊事件會失效
                            },
                            series: {
                                cursor: 'pointer',
                                point: {
                                    events: {
                                        // 數據點點擊事件
                                        // 其中 e 變量爲事件對象，this 爲當前數據點對象
                                        click: function (e) {
　　　　　　　　　　　　　　　　　　　　　　　　　　//曲線上節點值及名稱
                                            //alert(e.point.category + "" + this.series.name)
                                            window.open("/Rpt/InfoStatistics?Name='" + escape(this.series.name) + "'&Date='" + escape(e.point.category) + " '")
                                        }
                                    }
                                },
                                marker: {
                                    lineWidth: 1
                                }
                            }
                        },
                        series: jsons
                    });

                }
            });

 

 public string rpt_InfoStatistics()
        {
            string json = "[";
            string str_AreaID = string.Empty;
            string sqlwhere = string.Empty;
            string CurrentDates = string.Empty;
            int total = 0;
            DataTable dt = QQMsgbll.Get_CompanyInfo_Table(LoginFilterAttribute.GetUserRightDepts_sqlwhere(), out total);
            foreach (DataRow item in dt.Rows)
            {
                str_AreaID = item["ID"].ToString();
                sqlwhere = " and Area_ID=" + str_AreaID + " ";

                string data = string.Empty;
                string name = string.Empty;
                DataTable StatisticsDT = InfoStatisticsbll.Get_InfoStatistics_Table(LoginFilterAttribute.GetStatistics_sqlwhere() + sqlwhere, out total);
                if (StatisticsDT != null)
                {
                    if (StatisticsDT.Rows.Count > 0)
                    {
                        foreach (DataRow itemL in StatisticsDT.Rows)
                        {
                            name = itemL["Company_Name"].ToString();
                            data += itemL["QQNum"].ToString() + ",";
                            if (!CurrentDates.Contains(itemL["CurrentDate"].ToString()))
                                CurrentDates += itemL["CurrentDate"].ToString() + ",";
                        }
                    }
                }
                if (name != "")
                {
                    json += "{\"name\": \"" + name + "\",\"data\":[" + data.TrimEnd(',') + "]},";
                }
            }
            string str = CurrentDates.Replace("0:00:00", "");
            string[] strs = str.Split(',');
            string s = "";
            for (int i = 0; i < strs.Length - 1; i++)
            {
                if (s == "")
                { s += "'" + strs[i] + "'"; }
                else
                {
                    s += ",'" + strs[i] + "'";
                }
            }
            ViewBag.CurrentDates = s;
            return json.TrimEnd(',') + "]";
        }

 

 

<div id="container" style="width:1200px;height:500px"></div>

 

https://www.hcharts.cn/demo/highcharts  官網地址，有不少實例可下載參考。

引用js文件

 

 

展現效果圖：

 

 

後臺數據格式爲：

[

{name: '曲線1', data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]},
{name: '曲線2', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}

]

注：數據格式最外面大括號須要在後臺拼接起來傳進前臺頁面內接受 才能夠正常顯示圖表內容。