Js生成(柱形/餅圖)圖表

首先加載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>

JS

<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