asp.net柱形图

王朝学院·作者佚名  2016-08-28  
宽屏版  字体: 小 | 中 | 大 | 超大  

在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 +"]";

}

大功告成,柱形图数据填充结束。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
© 2005- 王朝网络 版权所有