Highcharts使用

Highcharts圖表控件是使用比較普遍的圖表控件。本文將介紹如何配置Highcharts和動態生成Highcharts圖表。可參考Highcharts官網：http://www.highcharts.com

1. 前言

Highcharts主要包含兩個部分：Highcharts和Highstock。

Highcharts能夠爲網站和web應用程序提供直觀、互動式的圖表，目前支持：線、樣條、面積、areaspline、柱形圖、條形圖、餅圖和散點圖類型。

Highstock能夠創建股票或通常的時間軸圖表，它包括先進的導航選項、預設的日期範圍、日期選擇器、滾動和平移等。

2. 安裝

1.Highcharts沿用jquery,MooToo,Prototype等Javascript框架來處理基本的Javascript任務。因此，使用Highcharts以前，須要引用以下腳本文件。若是使用jQuery做爲基本框架，那麼須要在頭部同時引用jQuery和Highcharts兩個文件。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>

Highcharts和Highstock內置了jQuery適配器，因此能夠直接引用；但沒有內置其餘JavaScript框架的適配器，所以使用MooTools等其餘JS框架時，須要單獨引用適配器腳本文件。

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js" type="text/javascript"></script>
<script src="/js/adapters/mootools-adapter.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>

3.國民體質統計結果展現

調用Highcharts代碼對統計結果進行展現，js代碼以下：

   //顯示統計圖
        function ShowGraph(data) {
            var xname = [];
            var seriesData = [];
            var series5 = {};
            series5["name"] = "5";
            var tempdata = [];
            var project = $('#Project').find("option:selected").text();
            var index = 0;
            for (var i in data) {
                if (project == "所有") {
                    tempdata.push(parseFloat(data[i]["C5Per"]));
                    xname[index++] = data[i]["Project"];
                } else {
                    if (project == data[i]["Project"]) {
                        tempdata.push(parseFloat(data[i]["C5Per"]));
                        xname[index++] = data[i]["Project"];
                    }
                }
            }
            series5["data"] = tempdata;
            seriesData.push(series5);
            var series4 = {};
            series4["name"] = "4";
            tempdata = [];
            for (var i in data) {
                if (project == "所有") {
                    tempdata.push(parseFloat(data[i]["C4Per"]));
                } else {
                    if (project == data[i]["Project"]) {
                        tempdata.push(parseFloat(data[i]["C4Per"]));
                    }
                }
            }
            series4["data"] = tempdata;
            seriesData.push(series4);
            var series3 = {};
            series3["name"] = "3";
            tempdata = [];
            for (var i in data) {
                if (project == "所有") {
                    tempdata.push(parseFloat(data[i]["C3Per"]));
                } else {
                    if (project == data[i]["Project"]) {
                        tempdata.push(parseFloat(data[i]["C3Per"]));
                    }
                }
            }
            series3["data"] = tempdata;
            seriesData.push(series3);
            var series2 = {};
            series2["name"] = "2";
            tempdata = [];
            for (var i in data) {
                if (project == "所有") {
                    tempdata.push(parseFloat(data[i]["C2Per"]));
                } else {
                    if (project == data[i]["Project"]) {
                        tempdata.push(parseFloat(data[i]["C2Per"]));
                    }
                }
            }
            series2["data"] = tempdata;
            seriesData.push(series2);
            var series1 = {};
            series1["name"] = "1";
            tempdata = [];
            for (var i in data) {
                if (project == "所有") {
                    tempdata.push(parseFloat(data[i]["C1Per"]));
                } else {
                    if (project == data[i]["Project"]) {
                        tempdata.push(parseFloat(data[i]["C1Per"]));
                    }
                }
            }
            series1["data"] = tempdata;
            seriesData.push(series1);
            $("#container").empty();
            $('#container').highcharts({
                colors: ['#a9d86e', '#ffb500', '#5eaee3', '#847eb6', '#e06292'],
                chart: {
                    type: 'column',
                    options3d: {
                        enabled: true,
                        alpha: 15,
                        beta: 15,
                        viewDistance: 25,
                        depth: 40
                    }
                },
                title: {
                    text: '國民體質指標分析'
                },
                xAxis: {
                    categories: xname
                },
                yAxis: {
                    allowDecimals: false,
                    min: 0,
                    max: 100,
                    title: {
                        text: '比例'
                    }
                },
                tooltip: {
                    headerFormat: '<b>{point.key}</b><br>',
                    pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: 佔{point.y}%'
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        depth: 40
                    }
                },
                series: seriesData
            });
        }

統計圖：