您的位置：首页 > 编程语言 > ASP

asp.net 柱形图

2016-04-08 19:40 501 查看

在vs中，如果要使用柱形图，我们大多数使用第三方提供的插件，所以必须要引用样式，这里我使用的是Highcharts-4.1.9插件，百度一下就可以下载到。关键的js代码：

<script 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 decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});

</script>

//body里面内容
<body>
<form id="form1" runat="server">
<div class="easyui-panel" style="padding: 5px; margin-top:10px;">
<script src="../Highcharts-4.1.9/js/highcharts.js" type="text/javascript"></script>
<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后台获取数据库数据填充：

public string returnValue = "";
public string containerHeight = "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";
}
string dataY = "[{name: '总费用',data: [";
foreach (DataRow dr in dt.Rows)
{
dataY += "['" + dr["名称"].ToString() + "'," + dr["总费用"].ToString() + "]" + ",";
}
returnValue = dataY + "]";
}

转载于:http://www.cnblogs.com/hyyweb/p/5141021.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： asp.net 柱形图

相关文章推荐

新的分享

章节导航