asp.net 柱形图

来源：互联网发布：高中信息技术会考编程编辑：程序博客网时间：2024/06/14 13:37

在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

0 0