asp.net柱形图
在vs中,如果要使用柱形图,我们大多数使用第三方提供的插件,所以必须要引用样式,这里我使用的是Highcharts-4.1.9插件,百度一下就可以下载到。
关键的js代码:
<scrip[flash=500,400]http://www.knowsky.com/[/flash]t src="../Highcharts-4.1.9/js/jquery-1.8.2.min.js"></script>
<style type="text/CSS">
</style>
<script type="text/javascript">$(function () {
$('#container').highcharts({
chart: {
type:'column'},
title: {
text:'各科室出院人次统计'},
subtitle: {
text:'柱形图'},
xAxis: {
type:'category',
labels: {
rotation:-45,
style: {
fontSize:'13px',
fontFamily:'Verdana, sans-serif'}
}
},
yAxis: {
min:0,
title: {
text:'出院人次'}
},
legend: {
enabled:false},
tooltip: {
pointFormat:'{series.name}: <b>{point.y}</b><br/>'},
series:<%= returnValue %>,
dataLabels: {
enabled:true,
rotation:0,
color:'#FFFFFF',
align:'center',
format:'{point.y}',//one decimaly:10,//10 pixels down from the topstyle: {
fontSize:'13px',
fontFamily:'Verdana, sans-serif'}
}
}]
});
});</script>
//body里面内容
<body>
<form id="form1" runat="server">
<div class="easyui-panel" style="padding: 5px; margin-top:10px;">
[flash=500,400]http://Highcharts-4.1.9/js/highcharts.js[/flash]<script src="../Highcharts-4.1.9/js/highcharts.js" type="text/Javascript"></script>
[flash=500,400]http://Highcharts-4.1.9/js/modules/exporting.js[/flash]<script src="../Highcharts-4.1.9/js/modules/exporting.js" type="text/javascript"></script>
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
</div>
</form>
</body>
.net后台获取数据库数据填充:
publicstringreturnValue ="";publicstringcontainerHeight ="400px";//关键性代码DataTable dt = ((DataSet)rs).Tables[0];if(dt.Rows.Count >0)
{if(dt.Rows.Count >4)
{
containerHeight= (dt.Rows.Count *50).ToString() +"px";
}else{
containerHeight="200px";
}stringdataY ="[{name: '总费用',data: [";foreach(DataRow drindt.Rows)
{
dataY+="['"+ dr["名称"].ToString() +"',"+ dr["总费用"].ToString() +"]"+",";
}
returnValue= dataY +"]";
}
大功告成,柱形图数据填充结束。