highcharts+Asp.net简单示例
highcharts+Asp.net简单示例，asp.net生成DataTable后用linq处理成highcharts需要的数据格式后使用服务器端标签<%#%>绑定数据。DataTable手动添加的数据，实际应用以数据库为准。需要读取数据库。
转json字符串要用到Newtonsoft.Json.dll，可以去这里下载：Newtonsoft.Json.Net 4.0下载，效果如下
示例代码如下
<%@ Page Language="C#" %>
<%@ Import NameSpace="System.Linq" %>
<%@ Import NameSpace="System.Data" %>
<!DOCTYPE html>
<script runat="server">
protected string json;
protected void Page_Load(object sender, EventArgs e)
{
//测试数据，题主需要改为读取数据库
var dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("Value",typeof(float));
dt.Rows.Add("B", "3"); dt.Rows.Add("B", "5"); dt.Rows.Add("B", "6"); dt.Rows.Add("B", "3"); dt.Rows.Add("B", "11"); dt.Rows.Add("B", "13");
dt.Rows.Add("B", "5"); dt.Rows.Add("B", "17"); dt.Rows.Add("B", "0"); dt.Rows.Add("B", "8"); dt.Rows.Add("B", "9"); dt.Rows.Add("B", "6");
dt.Rows.Add("C", "3"); dt.Rows.Add("C", "0.6"); dt.Rows.Add("C", "3.5"); dt.Rows.Add("C", "8.4"); dt.Rows.Add("C", "13.5"); dt.Rows.Add("C", "17");
dt.Rows.Add("C", "18.6"); dt.Rows.Add("C", "17.9"); dt.Rows.Add("C", "14.3"); dt.Rows.Add("C", "9"); dt.Rows.Add("C", "3.9"); dt.Rows.Add("C", "1");
//测试数据
var data = dt.Rows.Cast<DataRow>().Select(i => new { Name = i.Field<string>("Name"), Value = i.Field<float>("Value") })
//Linq分组
.GroupBy(i => i.Name)
//组合成HightChart需要的内容
.Select(i => new
{
name = i.Key,
data = i.Select(x=>x.Value)
});
json = Newtonsoft.Json.JsonConvert.SerializeObject(data);//转为json字符串，Newtonsoft.Json.dll可以去这下载 https://www.w3dev.cn/download/20130218/Newtonsoft.Json.Net20.dll-download.aspx
this.DataBind();//执行数据绑定，这样aspx页面的服务器端标签<%#xxxx%>才能得到数据
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<script>
</script>
<div id="qst-daychart"></div>
<script src="https://www.w3dev.cn/theme/js/jquery1.4.2.js" ></script>
<script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
data = {
chart: {
backgroundColor: '#1e2131',
plotBorderColor: '#1c2a38',
plotBorderWidth: 1
},
title: {
text: false,
},
credits: {
enabled: false // 禁用版权信息
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickColor: '#1c2a38',
gridLineColor: '#1c2a38',
lineColor: '#1c2a38',
},
yAxis: {
title: false,
gridLineColor: '#1c2a38',
tickColor: '#1c2a38'
},
tooltip: {
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
itemStyle: { cursor: 'pointer', color: '#FFF' },
itemHiddenStyle: { color: '#CCC' },
},
series:<%#json%>//用服务器端标签绑定数据
}
Highcharts.chart('qst-daychart', data);
</script>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：highcharts+Asp.net简单示例