您的位置：首页 > 其它

HighChart 折线图 动态加载数据

2015-04-07 17:55 267 查看
前台页面：

<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
<script type="text/javascript">
function abc(series) {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: '故障检测次数折线图'
},
subtitle: {
text: 'Source: 故障检测预警平台'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: '故障检测次数 (次)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
credits: {
enabled: false // 清除HighChart logo
},
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function (event) {
$("#result").html("<b>Result : index = " + event.point.x + " , series = " + this.name + ', x = ' + event.point.category + ' ,y = ' + event.point.y + "</b>");//点击显示数据
}
}
}
},
series: eval('(' + series + ')')// 把字符串解析为json
});
};
</script>
</head>
<body>
<div id="container" style="min-width: 700px; height: 500px">
</div>
<script type="text/javascript">
$.post("LineChart.ashx", { action: "GetData" }, function (data) {
abc(data);
});//调用LineChart.ashx页面的GetData方法，并获得data
</script>
</body>


LineChart.ashx页面（一般处理程序）

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string action = context.Request["action"];
if (!string.IsNullOrEmpty(action))
{
switch (action)
{
case "GetData": GetData(context); break;//获得动态数据
}
}
}
public void GetData(HttpContext context)
{
string allstr = "";
string sum = "";
string a = "";
string b = "";
string c = "";
string d = "";
DAL.Fault dalFault = new DAL.Fault();
//循环读取数据库的Rule表
string connstr = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ToString();//获取连接数据库参数
using (MySqlConnection conn = new MySqlConnection(connstr))
{
conn.Open();
MySqlCommand cmd = new MySqlCommand("select * from fault", conn);
MySqlDataReader dr = cmd.ExecuteReader();
//将结果赋值到了dr，下面开始输出
while (dr.Read())
{
//获得typeid
string typeid = dr[2].ToString();
string str1 = "";
string str2 = "";
if (typeid == "3")
{
string typename = "数据库检测";
string strnew2 = "";
for (int i = 1; i <= 12; i++)
{
//获得总次数
DataSet dsSum = dalFault.GetSum("FaultMonth='" + i + "' and RuleTypeID='" + typeid + "'");
sum = dsSum.Tables[0].Rows[0][0].ToString();
if (!string.IsNullOrEmpty(sum))//判断不为空，做累加
{
str1 += sum + ",";
}
else
{
str1 += "0" + ",";
}
}
str2 = str1.Replace(",,", ",0,").Replace(",,", ",0,");//将,,替换成,0,
str2 = str2.Substring(0, str2.Length - 1);
strnew2 += "{" + "name:" + "'" + typename + "'," + "data:[" + str2 + "]}";//拼接字符串
a = strnew2;
}
else if (typeid == "2")
{
string str3 = "";
string str4 = "";
string strnew1 = "";
string typename = "服务检测";
for (int i = 1; i <= 12; i++)
{
//获得总次数
DataSet dsSum = dalFault.GetSum("FaultMonth='" + i + "' and RuleTypeID='" + typeid + "'");
sum = dsSum.Tables[0].Rows[0][0].ToString();
if (!string.IsNullOrEmpty(sum))
{
str3 += sum + ",";
}
else
{
str3 += "0" + ",";
}
}
str4 = str3.Replace(",,", ",0,").Replace(",,", ",0,");
str4 = str4.Substring(0, str4.Length - 1);
strnew1 += "{" + "name:" + "'" + typename + "'," + "data:[" + str4 + "]}";
b = strnew1;
}
else if (typeid == "1")
{
string str5 = "";
string str6 = "";
string strnew = "";
string typename = "网站检测";
for (int i = 1; i <= 12; i++)
{
//获得总次数
DataSet dsSum = dalFault.GetSum("FaultMonth='" + i + "' and RuleTypeID='" + typeid + "'");
sum = dsSum.Tables[0].Rows[0][0].ToString();
if (!string.IsNullOrEmpty(sum))
{
str5 += sum + ",";
}
else
{
str5 += "0" + ",";
}
}
str6 = str5.Replace(",,", ",0,").Replace(",,", ",0,");
str6 = str6.Substring(0, str6.Length - 1);
strnew += "{" + "name:" + "'" + typename + "'," + "data:[" + str6 + "]}";
c = strnew;
}
else
{
string str7 = "";
string str8 = "";
string strnew = "";
string typename = "服务器检测";
for (int i = 1; i <= 12; i++)
{
//获得总次数
DataSet dsSum = dalFault.GetSum("FaultMonth='" + i + "' and RuleTypeID='" + typeid + "'");
sum = dsSum.Tables[0].Rows[0][0].ToString();
if (!string.IsNullOrEmpty(sum))
{
str7 += sum + ",";
}
else
{
str7 += "0" + ",";
}
}
str8 = str7.Replace(",,", ",0,").Replace(",,", ",0,");
str8 = str7.Substring(0, str7.Length - 1);
strnew += "{" + "name:" + "'" + typename + "'," + "data:[" + str8 + "]}";
d = strnew;
}

}
//拼接总的字符串
allstr = "[" + a + "," + b + "," + c + "," + d + "]";
if (!string.IsNullOrEmpty(allstr))
{
//返回json字符串 格式：[{name:'检测',data:[1,2.3,4]},{..}] 每组大括号是一组检测数据
//newstr1 = "[{name: '网站检测',data: [1.0, 5.9, 9.5, 10.5, 18.4, 7.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]},{name: '网站检测',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]}]";
context.Response.Write(allstr);
context.Response.End();
}
else
{
context.Response.Write("测试呢");
context.Response.End();
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航