您的位置:首页 > 其它

highchart 报表及 单击事件

2013-04-26 23:11 507 查看
一、引入包名、载入容器、绑定数据

<script src="../lib/jquery/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="../lib/Highcharts/js/highcharts.js" type="text/javascript"></script>


<div id="container" style="min-width: 800px; height: 400px; margin: 0 2em;" runat="server">
</div>
<script type="text/JavaScript">
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
//00
chart: {
renderTo: 'container',
type: 'column',
margin: [50, 50, 100, 80]
},
title: {
text: '企业统计图表'
},
subtitle: {
text: '(<%=title %>)',
x: 0
},
xAxis: {
categories: <%=x %>,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: '<%=title %>'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' + '<%=title %>: ' + Highcharts.numberFormat(this.y, 0);
}
},
exporting: {
enabled: false //用来设置是否显示‘打印’,'导出'等功能按钮,不设置时默认为显示
},
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function(e) {
var s = e.point;
alert(e.point.category);
}
}
}
},
series: [{
name: '<%=title %>',
data: [<%=y %>],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 0,
y: 0,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
//11
});
});
});
</script>
using System.Text;//引入命名空间
public partial class Test_Default : System.Web.UI.Page
{
public string title = "测试";
public StringBuilder xData = null;
public StringBuilder yData = null;
public string x = null, y = null;
protected void Page_Load(object sender, EventArgs e)
{
InitData();
}
public void InitData()
{
xData = new StringBuilder();
xData.Append("[");
xData.Append("'语文','数学','英语','理综'");
xData.Append("]");

yData = new StringBuilder();
yData.Append("1,3,5,7");
x = xData.ToString();
y = yData.ToString();
}
}


显示效果

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: