Js生成(柱形/饼图)图表

JS生成柱形图与饼图

最新推荐文章于 2024-09-09 23:45:41 发布

蓝图

最新推荐文章于 2024-09-09 23:45:41 发布

阅读量3.5k

点赞数

分类专栏： Asp.net C# JavaScript

C# 同时被 3 个专栏收录

38 篇文章

订阅专栏

JavaScript

13 篇文章

订阅专栏

Asp.net

12 篇文章

订阅专栏

本文介绍如何使用Highcharts库在ASP.NET中生成柱形图和饼图，包括前后端代码示例及数据库数据处理过程。

首先加载js文件:<script src="/script/jquery-1.3.2.min.js" type="text/javascript"></script> 点击下载

需要加载的js文件:<script src="/script/highcharts.js" type="text/javascript"></script> 点击下载

JS生成柱形图表

前台.aspx

<div id="chartBar" style="width:450px; height:250px; float:left"></div> 
        <div id="chartPie" style="width:200px; height:250px; float:left"></div>

<script type="text/javascript" >
 var chart; 
$(function() {
//===============年龄分布柱状图===============
            var line1 = <%=manTotal%>;           //子统计1数据   
            var line2 = <%=femanTotal%>;     //子统计2数据   

            chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'chartBar',
                        type: 'column'
                    },
                    title: {
                        text: '年龄分布图'
                    },
                    subtitle: {
                        text: ''
                    },
                    credits: {
                        enabled: false//坑爹的属性，去掉官网的链接
                    },
                    xAxis: {
                        categories: <%=xaxisStr%>
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '人数 (人)'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        backgroundColor: '#FFFFFF',
                        align: 'left',
                        verticalAlign: 'top',
                        x: 300,
                        y: 30,
                        floating: true,
                        shadow: false
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.series.name +':</b>'+this.y +' 人';
                        }
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            shadow: false            }
                    },
                    series: [{
                        name: '男',
                        data: line1

                        }, {
                            name: '女',
                            data: line2

                        }
                    ]
                });
})
</script>

后台.aspx.cs

protected string manTotal = string.Empty;
        protected string femanTotal = string.Empty;
        protected string xaxisStr = string.Empty;
        protected void Page_Load(object sender, EventArgs e)
        {
               BindDistribution();
        }
        /// <summary>
        /// 体检人员分布
      /// </summary>
        private void BindDistribution()
        {
            System.Data.DataTable dt = ds.Tables[0];
            StringBuilder sb1 = new StringBuilder();
            StringBuilder sb2 = new StringBuilder();
            StringBuilder sb3 = new StringBuilder();
            
            for (int i = 0; i < dt.Rows.Count-1;i++ )
            {
                sb1.AppendFormat("{0},",dt.Rows[i]["男性人数"].ToString());
                sb2.AppendFormat("{0},", dt.Rows[i]["女性人数"].ToString());
                sb3.AppendFormat("'{0}',", dt.Rows[i]["年龄段"].ToString());
                
            }
            manTotal = "[" + sb1.ToString().TrimEnd(',') + "]";
            femanTotal = "[" + sb2.ToString().TrimEnd(',') + "]";
            xaxisStr = "[" + sb3.ToString().TrimEnd(',') + "]";
        }

注：从数据库获取到dt:

生成图如上图所示

JS生成饼图

前台.aspx文件

<div id="chartPie" style="width:200px; height:250px; float:left"></div>

JS代码

<script type="text/javascript">
var chart;
$(function() {
//===============年龄分布饼图===============
            var data = [<%=percentageStr%>];

            var piechart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'chartPie',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: '性别分布图'
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            shadow: false,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: '性别分布图',
                        data: data
                    }]
                });
})
</script >

后台.aspx.cs

protected string percentageStr = string.Empty;
        protected void Page_Load(object sender, EventArgs e)
        {
                BindDistribution();
        }
        /// <summary>
        /// 体检人员分布
      /// </summary>
        private void BindDistribution()
        {
            System.Data.DataTable dt = ds.Tables[0];
            for (int i = 0; i < dt.Rows.Count-1;i++ )
            {
                      percentageStr = "['男'," + dt.Rows[dt.Rows.Count - 1]["男性人数"].ToString() + "],['女'," + dt.Rows[dt.Rows.Count - 1]["女性人数"].ToString() + "]";
        }

注：dt为生成柱状图用的dt一样

点击下载源文件 Test.rar