jQuery插件HighCharts實(shí)現(xiàn)的2D堆條狀圖效果示例【附demo源碼下載】

更新時(shí)間：2017年03月14日 10:20:55 作者：翱翔天地

這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)的2D堆條狀圖效果,結(jié)合完整實(shí)例形式分析了jQuery插件HighCharts繪制條狀圖的具體實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了jQuery插件HighCharts實(shí)現(xiàn)的2D堆條狀圖效果。分享給大家供大家參考，具體如下：

1、HighCharts之2D堆條狀圖源碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D堆條狀圖</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
   $('#stackedBarChart').highcharts({
     chart: {
       type: 'bar'
     },
     title: {
       text: '堆條狀圖'
     },
     xAxis: {
       categories: ['蘋果', '橘子', '梨子', '葡萄', '香蕉']
     },
     yAxis: {
       min: 0,
       title: {
         text: '水果銷量'
       }
     },
     legend: {
       backgroundColor: '#FFFFFF',
       reversed: true
     },
     plotOptions: {
       series: {
         stacking: 'normal'
       }
     },
       series: [{
       name: '星期一',
       data: [50, 34, 45, 77, 28]
     }, {
       name: '星期二',
       data: [92, 32, 43, 22, 61]
     }, {
       name: '星期三',
       data: [83, 44, 54, 12, 59]
     }, {
       name: '星期四',
       data: [63, 94, 67, 23, 12]
     }, {
       name: '星期五',
       data: [57, 64, 24, 37, 98]
     }, {
       name: '星期六',
       data: [34, 12, 44, 65, 32]
     }, {
       name: '星期日',
       data: [67, 47, 23, 96, 23]
     }]
   });
 });
</script>
</head>
<body>
  <div id="stackedBarChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、運(yùn)行結(jié)果

附：完整實(shí)例代碼點(diǎn)擊此處本站下載。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Jquery判斷$("#id")獲取的對象是否存在的方法
如何判斷獲取的對象是否存在，貌似有很多方法實(shí)現(xiàn)，下面以$("#id")舉例，為大家詳細(xì)介紹下具體的判斷過程
2013-09-09
三分鐘帶你玩轉(zhuǎn)jQuery.noConflict()
這篇文章主要介紹了三分鐘帶你玩轉(zhuǎn)jQuery.noConflict() 的相關(guān)資料,需要的朋友可以參考下
2016-02-02
利用jqprint插件打印頁面內(nèi)容的實(shí)現(xiàn)方法
qprint是一個(gè)基于jquery編寫的頁面打印的一個(gè)小插件，但是不得不承認(rèn)這個(gè)插件確實(shí)很厲害，下面這篇文章主要給大家介紹了關(guān)于利用jqprint插件如何打印頁面內(nèi)容的實(shí)現(xiàn)方法，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01
網(wǎng)頁下載文件期間如何防止用戶對網(wǎng)頁進(jìn)行其他操作
網(wǎng)頁下載文件時(shí)需要一段時(shí)間，在這期間如何防止用戶對網(wǎng)頁進(jìn)行其他操作，將div覆蓋在網(wǎng)頁上，將網(wǎng)頁鎖住，具體實(shí)現(xiàn)如下
2014-06-06
jquery遍歷標(biāo)簽中自定義的屬性方法
下面小編就為大家?guī)硪黄猨query遍歷標(biāo)簽中自定義的屬性方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-09-09
jquery isType() 類型判斷代碼
jquery isType() 類型判斷代碼，需要的朋友可以參考下。
2011-02-02
JQuery AJAX實(shí)現(xiàn)目錄瀏覽與編輯的代碼
這部分作為后臺的一部分實(shí)現(xiàn)，目的是實(shí)現(xiàn)某個(gè)指定目錄下所有文件夾和文件的瀏覽，同時(shí)不顯示不允許的格式，對于文本格式和代碼文件可以進(jìn)行編輯
2008-10-10
jquery重復(fù)提交請求的原因淺析
jquery重復(fù)提交請求一般來說有兩個(gè)原因，一是沒有取消綁定；二是多次引用同一個(gè)js文件
2014-05-05
jQuery點(diǎn)擊按鈕彈出遮罩層且內(nèi)容居中特效
這篇文章主要介紹了jQuery點(diǎn)擊按鈕彈出遮罩層且內(nèi)容居中特效，需要的朋友可以參考下
2015-12-12
jQuery實(shí)現(xiàn)的上拉刷新功能組件示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的上拉刷新功能組件,涉及jQuery事件響應(yīng)與頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2020-05-05