柱狀圖廣泛應(yīng)用于數(shù)據(jù)統(tǒng)計和分析，它是由一系列高度不等的縱向條紋表示數(shù)據(jù)分布的情況，能夠直觀的表示數(shù)據(jù)間的差異。柱狀圖可以是縱向和橫向排列，本文講解通過Highcharts生成一個年度財經(jīng)支出統(tǒng)計圖和一個男女比例分布圖。

• 下載Highcharts

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

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

 
var chart; 
$(function() { 
    chart = new Highcharts.Chart({ 
        chart: { 
            renderTo: 'chart_column', //圖表放置的容器，關(guān)聯(lián)DIV#id 
            zoomType: 'xy'   //X、Y軸均可放大 
            //因?yàn)槭侵鶢顖D和曲線圖共存在一個圖表中，所以默認(rèn)圖表類型不在這里設(shè)置。 
        }, 
        title: { 
            text: '2011-2012年財經(jīng)支出統(tǒng)計圖' //圖表標(biāo)題 
        }, 
        subtitle: { 
            text: '數(shù)據(jù)來源：新浪財經(jīng)'   //圖表副標(biāo)題 
        }, 
        credits: { 
            enabled: false   //不顯示LOGO 
        }, 
        xAxis: [{ //X軸標(biāo)簽 
            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,  //逆時針旋轉(zhuǎn)45°，標(biāo)簽名稱太長。 
                align: 'right'  //設(shè)置右對齊 
            } 
        }], 
        yAxis: [{ //設(shè)置Y軸-第一個（增幅） 
            labels: { 
                formatter: function() { //格式化標(biāo)簽名稱 
                    return this.value + '%'; 
                }, 
                style: { 
                    color: '#89A54E' //設(shè)置標(biāo)簽顏色 
                } 
            }, 
            title: {text: ''}, //Y軸標(biāo)題設(shè)為空 
            opposite: true  //顯示在Y軸右側(cè)，通常為false時，左邊顯示Y軸，下邊顯示X軸 
 
        }, 
        { //設(shè)置Y軸-第二個（金額） 
            gridLineWidth: 0,  //設(shè)置網(wǎng)格寬度為0，因?yàn)榈谝粋€Y軸默認(rèn)了網(wǎng)格寬度為1 
            title: {text: ''},//Y軸標(biāo)題設(shè)為空 
            labels: { 
                formatter: function() {//格式化標(biāo)簽名稱 
                    return this.value + ' 萬億元'; 
                }, 
                style: { 
                    color: '#4572A7' //設(shè)置標(biāo)簽顏色 
                } 
            } 
 
        }], 
        tooltip: { //鼠標(biāo)滑向數(shù)據(jù)區(qū)顯示的提示框 
            formatter: function() {  //格式化提示框信息 
                var unit = { 
                    '金額': '億元', 
                    '增幅': '%' 
                } [this.series.name]; 
                return '' + this.x + ': ' + this.y + ' ' + unit; 
            } 
        }, 
        legend: { //設(shè)置圖例 
            layout: 'vertical', //水平排列圖例 
            shadow: true,  //設(shè)置陰影 
        }, 
        series: [{  //數(shù)據(jù)列 
            name: '金額', 
            color: '#4572A7', 
            type: 'column', //類型：縱向柱狀圖 
            yAxis: 1, //數(shù)據(jù)列關(guān)聯(lián)到Y(jié)軸，默認(rèn)是0，設(shè)置為1表示關(guān)聯(lián)上述第二個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] //金額數(shù)據(jù) 
        }, 
        { 
            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] //增幅數(shù)據(jù) 
        }] 
    }); 
}); 

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

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

首先，設(shè)計一張簡單的表chart_student，用來存儲各學(xué)院的男生女生人數(shù)。

然后，連接mysql表，讀取數(shù)據(jù)：

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

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

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

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

這樣就生成了一張男女比例分布圖，。

來源

原文

推薦閱讀：

• Highcharts插件制作教程
• Highcharts插件常見錯誤及解決辦法
• amCharts和Highcharts繪制多曲線圖教程
• Highcharts錯誤代碼指示合集
• Highcharts 4.0與ECharts 2.0對比評測