asp.net 柱形图

最新推荐文章于 2019-01-18 09:10:30 发布

qq_27915701

最新推荐文章于 2019-01-18 09:10:30 发布

阅读量323

点赞数

分类专栏： Asp.net 文章标签： asp.net 柱形图

Asp.net 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在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

qq_27915701

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp.net 柱形图

在vs中，如果要使用柱形图，我们大多数使用第三方提供的插件，所以必须要引用样式，这里我使用的是Highcharts-4.1.9插件，百度一下就可以下载到。关键的js代码： $(function () { $('#container').highcharts({
复制链接

扫一扫