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]}]
注：数据格式最外面大括号需要在后台拼接起来传进前台页面内接受 才可以正常显示图表内容。