使用Highcharts生成柱狀圖

Jan

20

使用Highcharts生成柱狀圖

helloweba.com 做者：月光光 時間：2012-01-20 10:04           標籤： Highcharts  圖表  柱狀圖           

柱狀圖普遍應用於數據統計和分析，它是由一系列高度不等的縱向條紋表示數據分佈的狀況，可以直觀的表示數據間的差別。柱狀圖能夠是縱向和橫向排列，本文講解經過Highcharts生成一個年度財經支出統計圖和一個男女比例分佈圖。

查看演示DEMO

一、年度財經支出統計圖

經過如下配置，能夠生成一個柱狀圖與曲線圖共存、雙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] //增幅數據 
        }] 
    }); 
}); 

二、各學院畢業生男女比例分佈圖

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

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

而後，鏈接mysql表，讀取數據：

include_once('connect.php'); //鏈接數據庫文件 
$res = mysql_query("select * from chart_student"); //查詢讀取chart_student 
while($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。

好了，明天開始放假了，還有餅狀圖、區域圖的例子年後奉上，在這裏我祝你們春節愉快，開心過大年！

聲明：本文爲原創文章，helloweba.com和做者擁有版權，如需轉載，請註明來源於helloweba.com並保留原文連接，不然視爲侵權。