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(',') + "]";        }

 

 

 

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]}

]

注：数据格式最外面大括号需要在后台拼接起来传进前台页面内接受 才可以正常显示图表内容。