如何使用Highcharts生成柱狀圖

這篇文章主要為大家展示了“如何使用Highcharts生成柱狀圖”，內容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習一下“如何使用Highcharts生成柱狀圖”這篇文章吧。

1、年度財經(jīng)支出統計圖

通過(guò)以下配置，可以生成一個(gè)柱狀圖與曲線(xiàn)圖共存、雙Y軸、X軸標簽旋轉（標簽名稱(chēng)太長(cháng)的情況）、XY軸均可放大的、去除LOGO信息的統計圖表。具體請看代碼和注釋?zhuān)?/p>

var chart;$(function() {    chart = new Highcharts.Chart({        chart: {            renderTo: 'chart_column', //圖表放置的容器，關(guān)聯(lián)DIV#id            zoomType: 'xy'   //X、Y軸均可放大            //因為是柱狀圖和曲線(xiàn)圖共存在一個(gè)圖表中，所以默認圖表類(lèi)型不在這里設置。        },        title: {            text: '2011-2012年財經(jīng)支出統計圖' //圖表標題        },        subtitle: {            text: '數據來(lái)源：新浪財經(jīng)'   //圖表副標題        },credits: {enabled: false   //不顯示LOGO},        xAxis: [{ //X軸標簽            categories: ['2010年3月', '2010年4月', '2010年5月', '2010年6月', '2010年7月',       '2010年8月', '2010年10月', '2010年11月', '2010年12月', '2011年3月', '2011年4月', '2011年5月',       '2011年6月', '2011年7月', '2011年8月', '2011年9月', '2011年10月', '2011年11月'],labels: {rotation: -45,  //逆時(shí)針旋轉45°，標簽名稱(chēng)太長(cháng)。align: 'right'  //設置右對齊}        }],        yAxis: [{ //設置Y軸-第一個(gè)（增幅）            labels: {                formatter: function() { //格式化標簽名稱(chēng)                    return this.value + '%';                },                style: {                    color: '#89A54E' //設置標簽顏色                }            },            title: {text: ''}, //Y軸標題設為空            opposite: true  //顯示在Y軸右側，通常為false時(shí)，左邊顯示Y軸，下邊顯示X軸        },        { //設置Y軸-第二個(gè)（金額）            gridLineWidth: 0,  //設置網(wǎng)格寬度為0，因為第一個(gè)Y軸默認了網(wǎng)格寬度為1            title: {text: ''},//Y軸標題設為空            labels: {                formatter: function() {//格式化標簽名稱(chēng)                    return this.value + ' 萬(wàn)億元';                },                style: {                    color: '#4572A7' //設置標簽顏色                }            }        }],        tooltip: { //鼠標滑向數據區顯示的提示框            formatter: function() {  //格式化提示框信息                var unit = {                    '金額': '億元',                    '增幅': '%'                } [this.series.name];                return '' + this.x + ': ' + this.y + ' ' + unit;            }        },        legend: { //設置圖例            layout: 'vertical', //水平排列圖例shadow: true,  //設置陰影        },        series: [{  //數據列            name: '金額',            color: '#4572A7',            type: 'column', //類(lèi)型：縱向柱狀圖            yAxis: 1, //數據列關(guān)聯(lián)到Y軸，默認是0，設置為1表示關(guān)聯(lián)上述第二個(gè)Y軸即金額            data: [5923.95, 5575.55, 5786.7, 8119.15, 5810.87, 6413.69, 6488.3, 10599.64,   17982, 7570, 7304.45, 8268, 10809.12, 6949.92, 8076.92, 10018.55, 8079.03, 11396.18] //金額數據        },        {            name: '增幅',            color: '#89A54E',            type: 'spline', //類(lèi)型：曲線(xiàn)圖            data: [18.3, 9.8, 25.6, 26.8, 16.6, 35.4, 38.5, 66.9, -10.4, 27.8, 31.0, 42.9,             33.1, 19.6, 25.9, 18.3, 24.5,7.5] //增幅數據        }]    });});

2、各學(xué)院畢業(yè)生男女比例分布圖

前面的例子我們都使用的是靜態(tài)數據，本例中，我想通過(guò)PHP來(lái)讀取數據表中的數據，然后處理給Highcharts生成一個(gè)男女比例分布圖。

首先，設計一張簡(jiǎn)單的表chart_student，用來(lái)存儲各學(xué)院的男生女生人數。

然后，連接mysql表，讀取數據：

include_once('connect.php'); //連接數據庫文件$res = mysql_query("select * from chart_student"); //查詢(xún)讀取chart_studentwhile($row = mysql_fetch_array($res)){ //循環(huán)結果集$college[] = $row['college'];  //獲取學(xué)院名稱(chēng)$male[] = intval($row['male']);  //獲取男生人數，并轉換為數字整型$female[] = intval($row['female']); //獲取女生人數，并轉換為數字整型}

本例將要通過(guò)Highcharts生成一個(gè)橫向柱狀圖，Y軸表示學(xué)院，X軸表示各學(xué)院男女比例分布。通過(guò)上述PHP代碼獲取學(xué)院名稱(chēng)作為Y軸標簽，獲取各學(xué)院男生和女生數作為X軸計算比例。

接下來(lái)配置Highcharts，請看代碼和注釋?zhuān)?/p>

var chart;$(function() {     chart = new Highcharts.Chart({        chart: {            renderTo: 'chart_bar',  //圖表放置的容器，關(guān)聯(lián)DIV#id            defaultSeriesType: 'bar'  //圖標類(lèi)型為bar，即橫向柱狀條形統計圖        },        title: {            text: '2011屆畢業(yè)生各學(xué)院男女比例分布圖'  //設置圖表標題        },        xAxis: { //設置X軸categories: <?php echo json_encode($college); ?>  //通過(guò)PHP將讀取的學(xué)院名稱(chēng)以JSON格式輸出        },        yAxis: { //設置Y軸            min: 0,  //最小值為0            title: {text: ''}        },        plotOptions: { //設置數據點(diǎn)            series: {                stacking: 'percent'  //數據點(diǎn)關(guān)聯(lián)組合，采用百分比形式            }        },        series: [{            name: '男生',data: <?php echo json_encode($male);?>  //通過(guò)PHP將讀取的各學(xué)院男生人數并以JSON格式輸出        },        {            name: '女生',data: <?php echo json_encode($female);?> //通過(guò)PHP將讀取的各學(xué)院女生人數并以JSON格式輸出        }]    });});

這樣就生成了一張男女比例分布圖，請點(diǎn)擊這里看demo。