官網地址：http://www.highcharts.com/
官網API地址：http://api.highcharts.com/highcharts
注意事項：數據中的數據一定要轉型，正是由於這個問題浪費了我一天時間，特此寫了這篇文章來記錄
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></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>
動態獲取文件一般處理程序：
<%@ 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;
}
}
效果圖：
