JQuery图表插件——Highcharts

最新推荐文章于 2021-08-05 23:18:57 发布

ruiqi317

最新推荐文章于 2021-08-05 23:18:57 发布

阅读量2.3k

点赞数

文章标签： jquery图表 string function jquery button null

1、JQuery 柱形图

第一步，下载并且引用JS包（highcharts.js），theme顾名思义是放皮肤的。可以下载DEMO逐一试试就知道效果怎么样了，上图就应用了两个样式。点击跳转官网

主要实现代码

<%-- <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>--%>

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 = [];

</script>

</head>
<body>
<form id="Form1" runat="server" action="">
<div id="container">
</div>
<input id="ButtonCallBack" type="button" value="[实现了异步回调功能的Button]" οnclick="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