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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、潮南網(wǎng)站維護(hù)、網(wǎng)站推廣。

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

通過以下配置，可以生成一個(gè)柱狀圖與曲線圖共存、雙Y軸、X軸標(biāo)簽旋轉(zhuǎn)（標(biāo)簽名稱太長(zhǎng)的情況）、XY軸均可放大的、去除LOGO信息的統(tǒng)計(jì)圖表。具體請(qǐ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和曲線圖共存在一個(gè)圖表中，所以默認(rèn)圖表類型不在這里設(shè)置。        },        title: {            text: '2011-2012年財(cái)經(jīng)支出統(tǒng)計(jì)圖' //圖表標(biāo)題        },        subtitle: {            text: '數(shù)據(jù)來源：新浪財(cái)經(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,  //逆時(shí)針旋轉(zhuǎn)45°，標(biāo)簽名稱太長(zhǎng)。align: 'right'  //設(shè)置右對(duì)齊}        }],        yAxis: [{ //設(shè)置Y軸-第一個(gè)（增幅）            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時(shí)，左邊顯示Y軸，下邊顯示X軸        },        { //設(shè)置Y軸-第二個(gè)（金額）            gridLineWidth: 0,  //設(shè)置網(wǎng)格寬度為0，因?yàn)榈谝粋€(gè)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)上述第二個(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] //金額數(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生成一個(gè)男女比例分布圖。

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

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

include_once('connect.php'); //連接數(shù)據(jù)庫(kù)文件$res = mysql_query("select * from chart_student"); //查詢讀取chart_studentwhile($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生成一個(gè)橫向柱狀圖，Y軸表示學(xué)院，X軸表示各學(xué)院男女比例分布。通過上述PHP代碼獲取學(xué)院名稱作為Y軸標(biāo)簽，獲取各學(xué)院男生和女生數(shù)作為X軸計(jì)算比例。

接下來配置Highcharts，請(qǐng)看代碼和注釋：

var chart;$(function() {     chart = new Highcharts.Chart({        chart: {            renderTo: 'chart_bar',  //圖表放置的容器，關(guān)聯(lián)DIV#id            defaultSeriesType: 'bar'  //圖標(biāo)類型為bar，即橫向柱狀條形統(tǒng)計(jì)圖        },        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格式輸出        }]    });});

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

以上是“如何使用Highcharts生成柱狀圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：如何使用Highcharts生成柱狀圖-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://www.rwnh.cn/article32/cseipc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、定制開發(fā)、ChatGPT、標(biāo)簽優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)