jsp頁面：
<%--統計資料塊--%>
<div id="statDiv">
    <h1 style="background:#2dc713;"><span id="AttractInvestmentFindTitle">創新型社會管理服務平臺——統計</span><a class="closeShower" onclick="closeStatDiv()" href="javascript:;" title="關閉" onclick="closeOverlayer()"></a></h1>
    <%--人口統計--%>
    <div id="peopleStat">
        <div id="peoplestat1" style="min-width:400px;height:200px"></div>
        <div id="peoplestat2" style="min-width:400px;height:200px"></div>
        <div id="peoplestat3" style="min-width:400px;height:200px"></div>
    </div>
    <div id="otherStat">
        <%--房屋統計--%>
        <div>
            <div id="houseStat" style="min-width:600px;height:300px"></div>
        </div>
        <%--事件統計--%>
        <div>
            <div id="eventStat" style="min-width:600px;height:300px"></div>
        </div>
    </div>
</div>


/*顯示統計總覽資料*/
function showStatData() {
    $("#statDiv").show();
    /*人口統計*/
    var chart = Highcharts.chart('peoplestat1', {
        credits:{
            enabled: false // 禁用版權資訊
        },
        chart :{
            backgroundColor: 'rgba(0,0,0,0.7)'
        },
        title: {
            text: '創新型社會管理平臺人口統計——性別佔比',
            style:{
                'fontSize' : '12px',
                color: 'white'
            }
        },
        tooltip: {
            headerFormat: '{series.name}<br>',
            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,  // 可以被選擇
                cursor: 'pointer',       // 滑鼠樣式
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    },
                    connectorColor : "white"
                }
            }
        },
        series: [{
            type: 'pie',
            name: '男女性別佔比',
            data: [
                {
                    name: '男性',
                    y: 51.8,
                    sliced: false,  // 預設突出
                    selected: true // 預設選中
                },
                ['女性',   48.2]
            ]
        }]
    });
    var chart = Highcharts.chart('peoplestat2', {
        credits:{
            enabled: false // 禁用版權資訊
        },
        chart :{
            backgroundColor: 'rgba(0,0,0,0.7)'
        },
        title: {
            text: '創新型社會管理平臺人口統計——城鄉人口占比',
            style:{
                'fontSize' : '12px',
                color: 'white'
            }
        },
        tooltip: {
            headerFormat: '{series.name}<br>',
            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,  // 可以被選擇
                cursor: 'pointer',       // 滑鼠樣式
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    },
                    connectorColor : "white"
                }
            }
        },
        series: [{
            type: 'pie',
            name: '城鄉戶口占比',
            data: [
                {
                    name: '城鎮人口',
                    y: 48.52,
                    sliced: false,  // 預設突出
                    selected: true // 預設選中
                },
                ['農村人口',  51.48]
            ]
        }]
    });
    var chart = Highcharts.chart('peoplestat3', {
        credits:{
            enabled: false // 禁用版權資訊
        },
        chart :{
            backgroundColor: 'rgba(0,0,0,0.7)'
        },
        title: {
            text: '創新型社會管理平臺人口統計——年齡佔比',
            style:{
                'fontSize' : '12px',
                color: 'white'
            }
        },
        tooltip: {
            headerFormat: '{series.name}<br>',
            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,  // 可以被選擇
                cursor: 'pointer',       // 滑鼠樣式
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    },
					connectorColor : "white"
                }
            }
        },
        series: [{
            type: 'pie',
            name: '年齡分佈佔比',
            data: [
                ['0-18歲',   17.6],
                ['18-35歲',  22.8],
                {
                    name: '35-60歲',
                    y: 40.4,
                    sliced: true,  // 預設突出
                    selected: true // 預設選中
                },
                ['60歲以上',   19.2]
            ]
        }]
    });
    /*房屋統計*/
    var chart = Highcharts.chart('houseStat',{
        credits:{
            enabled: false // 禁用版權資訊
        },
        chart: {
            type: 'column',
            backgroundColor: 'rgba(0,0,0,0.7)'
        },
        title: {
            text: '創新型社會管理平臺住房統計——樓宇分佈',
            style: {
                color: 'white'
            }
        },
        legend : {
            itemStyle: {
                color: '#ffffff',
                fontWeight: 'bold'
            }
        },
        xAxis: {
            categories: [
                '環城社群','水鄉社群','華陽街社群','西街社群','北街社群','狀元街社群','陵園街社群'
            ],
            crosshair: true,
            labels: {
                style: {
                    color: 'white'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '樓宇分佈（棟）',
                style: {
                    color: 'white'
                }
            },
            labels: {
                style: {
                    color: 'white'
                }
            }
        },
        tooltip: {
            // head + 每個 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y} 棟</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: [{
            name: '樓宇',
            data: [10,5,6,4,3,3,2]
        }]
    });
    /*事件統計*/
    var chart = Highcharts.chart('eventStat', {
        credits:{
            enabled: false // 禁用版權資訊
        },
        chart: {
            type: 'line',
			backgroundColor: 'rgba(0,0,0,0.7)'
        },
        title: {
            text: '創新型社會管理平臺事件統計——事發趨勢',
			style: {
                    color: 'white'
			}
        },
		legend : {
            itemStyle: {
                color: '#ffffff',
                fontWeight: 'bold'
            }
		},
        xAxis: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            labels: {
                style: {
                    color: 'white'
                }
            }
        },
        yAxis: {
            title: {
                text: '事件數 (件)',
				style: {
                        color: 'white'
				}
            },
            labels: {
                style: {
                    color: 'white'
                }
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    // 開啟資料標籤
                    enabled: true
                },
                // 關閉滑鼠跟蹤，對應的提示框、點選事件會失效
                enableMouseTracking: false
            }
        },
        series: [{
            name: '事件',
            data: [7, 6, 9, 12, 15, 16, 15, 14, 13, 9, 4, 0]
        }]
    });

}
/*關閉統計總覽*/
function closeStatDiv() {
    $("#statDiv").hide();
}