JQuery图表插件——Highcharts
1、JQuery 柱形图
第一步，下载并且引用JS包（highcharts.js），theme顾名思义是放皮肤的。可以下载DEMO逐一试试就知道效果怎么样了，上图就应用了两个样式。点击跳转官网
主要实现代码
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<%-- <script type="text/javascript" src="js/theme/grid.js"></script>--%>
<script src="Js/theme/dark-green.js" type="text/javascript"></script>
<%-- <script src="Js/theme/dark-blue.js" type="text/javascript"></script>--%>
<%--<script src="Js/theme/gray.js" type="text/javascript"></script>--%>
<script type="text/javascript">
var chart;var obj;
function show() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container', //放置图表的容器
plotBackgroundColor: null,
plotBorderWidth: null,
defaultSeriesType: 'column' //图表类型line, spline, area, areaspline, column, bar, pie , scatter
},
title: {
text: 'JQuery柱状图演示'
},
xAxis: {//X轴数据
categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份', '十三月份', '十四月份'],
labels: {
rotation: -45, //字体倾斜
align: 'right',
style: { font: 'normal 13px 宋体' }
}
},
yAxis: {//Y轴显示文字
title: {
text: '产量/百万'
}
},
tooltip: {
enabled: true,
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1) + "百万";
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
enableMouseTracking: true//是否显示title
}
},
series: seriesOptions
});
};
var seriesOptions = [];
function ButtonCallBack_onclick() {
CallPageServe("args1", "");
}
function CallBackServe(returnValue, context) {
// returnValue = '[{name:"aa",data:[1,2,3,4]},{name:"bb",data:[3,4,5,5]}]';
obj = eval("(" + returnValue + ")"); //json为接收的后台返回的数据
// alert(chart.series);
// alert(returnValue);
// alert(obj[0].data);
// alert(obj[1].data);
// alert(returnValue);
// show();
for (var i = 0; i < obj.length; i++) {
seriesOptions[i] = {
name:obj[i].name,
data:obj[i].data
};
}
show();
// chart.series[0].setName('江西');
// chart.series[0].setData(obj.zj);
}
</script>
</head>
<body>
<form id="Form1" runat="server" action="">
<div id="container">
</div>
<input id="ButtonCallBack" type="button" value="[实现了异步回调功能的Button]" onclick="return ButtonCallBack_onclick()" />
</form>
</body>
</html>
后台实现代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
using System.Text;
namespace MyTestSelfControl
{
public partial class Defalut2 : System.Web.UI.Page, ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string cbRe = Page.ClientScript.GetCallbackEventReference(this, "arg", "CallBackServe", "context");
string callbackscript;
callbackscript = "function CallPageServe(arg,context)" + "{" + cbRe + ";}";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallPageServe", callbackscript, true);
}
}
String returnValue = "";
#region ICallbackEventHandler 成员
public string GetCallbackResult()
{
//throw new NotImplementedException();
return returnValue;
}
public void RaiseCallbackEvent(string eventArgument)
{
//throw new NotImplementedException();
//在这个方法里类可以改变返回的值
#region "2"
String[] obj = new String[] { "浙江", "杭州", "江西" };
StringBuilder jsonString = new StringBuilder();
jsonString.Append("[");
for (int i = 0; i < 3; i++)
{
jsonString.Append("{");
jsonString.Append("name:");
jsonString.Append("\""+obj[i]+"\"" + ",");
jsonString.Append("data:");
//jsonString.Append(i+1);
jsonString.Append("[");
for (int j = 1; j < 13; j++)
{
jsonString.Append(i/2+j + ",");
}
jsonString.Remove(jsonString.Length - 1, 1);
jsonString.Append("]");
jsonString.Append("},");
}
jsonString.Remove(jsonString.Length - 1, 1);
jsonString.Append("]");
returnValue = jsonString.ToString();
#endregion
}
#endregion
}
}
通过json对象动态去后台数据
浙公网安备 33010602011771号