如何使用Highcharts生成柱狀圖

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

1、年度財經支出統計圖

通過以下配置，可以生成一個柱狀圖與曲線圖共存、雙Y軸、X軸標簽旋轉（標簽名稱太長的情況）、XY軸均可放大的、去除LOGO信息的統計圖表。具體請看代碼和注釋：

var chart;$(function() {    chart = new Highcharts.Chart({        chart: {            renderTo: 'chart_column', //圖表放置的容器，關聯DIV#id            zoomType: 'xy'   //X、Y軸均可放大            //因為是柱狀圖和曲線圖共存在一個圖表中，所以默認圖表類型不在這里設置。        },        title: {            text: '2011-2012年財經支出統計圖' //圖表標題        },        subtitle: {            text: '數據來源：新浪財經'   //圖表副標題        },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,  //逆時針旋轉45°，標簽名稱太長。align: 'right'  //設置右對齊}        }],        yAxis: [{ //設置Y軸-第一個（增幅）            labels: {                formatter: function() { //格式化標簽名稱                    return this.value + '%';                },                style: {                    color: '#89A54E' //設置標簽顏色                }            },            title: {text: ''}, //Y軸標題設為空            opposite: true  //顯示在Y軸右側，通常為false時，左邊顯示Y軸，下邊顯示X軸        },        { //設置Y軸-第二個（金額）            gridLineWidth: 0,  //設置網格寬度為0，因為第一個Y軸默認了網格寬度為1            title: {text: ''},//Y軸標題設為空            labels: {                formatter: function() {//格式化標簽名稱                    return this.value + ' 萬億元';                },                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', //類型：縱向柱狀圖            yAxis: 1, //數據列關聯到Y軸，默認是0，設置為1表示關聯上述第二個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', //類型：曲線圖            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、各學院畢業生男女比例分布圖

前面的例子我們都使用的是靜態數據，本例中，我想通過PHP來讀取mysql數據表中的數據，然后處理給Highcharts生成一個男女比例分布圖。

首先，設計一張簡單的表chart_student，用來存儲各學院的男生女生人數。

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

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

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

接下來配置Highcharts，請看代碼和注釋：

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

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

以上是“如何使用Highcharts生成柱狀圖”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！