本节内容：
highcharts 柱状图
官网地址：http://www.highcharts.com/
官网API地址：http://api.highcharts.com/highcharts
注意：数据中的数据一定要转型。
Tips：如果你不知道highcharts为何物？请参考本站：Highcharts教程 中的相关内容。
附，本节的源码下载地址：http://file.jb200.com/code/temp/2Highcharts.rar
1，html代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>highcharts 柱状图 - www.jb200.com</title>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Highcharts/highcharts.js" type="text/javascript"></script>
<script src="Highcharts/modules/exporting.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<fieldset>
<legend>Hightchart柱状图案例 </legend>
<div>
<script type="text/javascript">
/*获取json数据开始*/
//定义变量
$(document).ready(function () {
var jsonXData = [];
var jsonyD1 = [];
var jsonyD2 = [];
//获取数据
$.ajax({ url: 'Count.ashx',
cache: false,
async: false,
success: function (data) {
var json = eval("(" + data + ")");
if (json.Rows.length > 0) {
for (var i = 0; i < json.Rows.length; i++) {
var rows = json.Rows[i];
var Time = rows.Time;
var SumCount = rows.SumCount;
var IpCount = rows.IpCount;
jsonXData.push(Time); //赋值
//此处必须转型,不转型你就可以看到区别了
jsonyD1.push(parseInt(SumCount));
jsonyD2.push(parseInt(IpCount));
} //for
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'containerliuliang', //放置图表的容器
plotBackgroundColor: null,
plotBorderWidth: null,
defaultSeriesType: 'column' //图表类型line, spline, area, areaspline, column, bar, pie , scatter
},
title: {
text: 'JQuery柱状图演示'
},
xAxis: {//X轴数据
categories: jsonXData,
lineWidth: 2,
labels: {
rotation: -45, //字体倾斜
align: 'right',
style: { font: 'normal 13px 宋体' }
}
},
yAxis: {//Y轴显示文字
lineWidth: 2,
title: {
text: '浏览量/次'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + Highcharts.numberFormat(this.y, 0);
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
enableMouseTracking: true//是否显示title
}
},
series: [{
name: '总流量',
data: jsonyD1
}, {
name: 'IP流量',
data: jsonyD2
}]
});
//$("tspan:last").hide(); //把广告删除掉
} //if
}
});
});
</script>
<div id="containerliuliang">
</div>
</div>
</fieldset>
</form>
</body>
</html>
2，动态获取文件一般处理程序：
<%@ WebHandler Language="C#" Class="Count" %>
using System;
using System.Web;
using System.Data;
public class Count : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write(JsonConvert.GetJSON(CreteDataTable()));
context.Response.End();
//context.Response.ContentType = "text/plain";
//DateTime dateTime = DateTime.Now;
//System.Data.SqlClient.SqlParameter[] parameters = {
// new System.Data.SqlClient.SqlParameter("@datetime",dateTime)
// };
//System.Data.DataTable dt = LQJ.Comment.SqlHelp.RunDataTableProcedure("Proc_LoginRecordCount", parameters);
//context.Response.Write(JsonConvert.GetJSON(dt));
//context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
public DataTable CreteDataTable()
{
DataTable dataTable = new DataTable();
///添加新的数据列
dataTable.Columns.Add("Time", typeof(string));
dataTable.Columns.Add("SumCount", typeof(int));
dataTable.Columns.Add("IpCount", typeof(int));
DataRow row = dataTable.NewRow();
//row["Time"] = "00:00-01:00";
row["Time"] = "00:00-01:00";
row["SumCount"] = "500";
row["IpCount"] = "400";
dataTable.Rows.Add(row);
DataRow row1 = dataTable.NewRow();
//row1["Time"] = "01:00-02:00";
row1["Time"] = "01:00-02:00";
row1["SumCount"] = "600";
row1["IpCount"] = "300";
dataTable.Rows.Add(row1);
DataRow row2 = dataTable.NewRow();
//row2["Time"] = "02:00-03:00";
row2["Time"] = "02:00-03:00";
row2["SumCount"] = "500";
row2["IpCount"] = "400";
dataTable.Rows.Add(row2);
DataRow row3 = dataTable.NewRow();
//row3["Time"] = "03:00-04:00";
row3["Time"] = "03:00-04:00";
row3["SumCount"] = "700";
row3["IpCount"] = "300";
dataTable.Rows.Add(row3);
DataRow row4 = dataTable.NewRow();
//row3["Time"] = "03:00-04:00";
row4["Time"] = "04:00-05:00";
row4["SumCount"] = "300";
row4["IpCount"] = "200";
dataTable.Rows.Add(row4);
DataRow row5 = dataTable.NewRow();
//row5["Time"] = "04:00-05:00";
row5["Time"] = "05:00-06:00";
row5["SumCount"] = "800";
row5["IpCount"] = "600";
dataTable.Rows.Add(row5);
DataRow row6 = dataTable.NewRow();
//row6["Time"] = "05:00-06:00";
row6["Time"] = "06:00-07:00";
row6["SumCount"] = "700";
row6["IpCount"] = "500";
dataTable.Rows.Add(row6);
DataRow row7 = dataTable.NewRow();
//row7["Time"] = "06:00-07:00";
row7["Time"] = "08:00-09:00";
row7["SumCount"] = "550";
row7["IpCount"] = "450";
dataTable.Rows.Add(row7);
DataRow row8 = dataTable.NewRow();
//row8["Time"] = "07:00-08:00";
row8["Time"] = "09:00-10:00";
row8["SumCount"] = "650";
row8["IpCount"] = "420";
dataTable.Rows.Add(row8);
DataRow row9 = dataTable.NewRow();
//row8["Time"] = "07:00-08:00";
row9["Time"] = "10:00-11:00";
row9["SumCount"] = "750";
row9["IpCount"] = "320";
dataTable.Rows.Add(row9);
return dataTable;
}
}
效果图，如下：
