jQuery插件HighCharts繪制的2D堆柱狀圖效果示例【附demo源碼下載】

更新時間：2017年03月14日 10:32:27 作者：翱翔天地

這篇文章主要介紹了jQuery插件HighCharts繪制的2D堆柱狀圖效果,結合完整實例形式分析了jQuery插件HighCharts繪制2D柱狀圖的實現技巧與相關注意事項,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了jQuery插件HighCharts繪制的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(){
   $('#stackedChart').highcharts({
     chart: {
       type: 'column'
     },
     title: {
       text: '堆柱狀圖'
     },
     xAxis: {
       categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日']
     },
     yAxis: {
       min: 0,
       title: {
         text: '水果銷量'
       },
       stackLabels: {
         enabled: true,
         style: {
           fontWeight: 'bold',
           color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
         }
       }
     },
     legend: {
       align: 'right',
       x: -70,
       verticalAlign: 'top',
       y: 20,
       floating: true,
       backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
       borderColor: '#CCC',
       borderWidth: 1,
       shadow: false
     },
     tooltip: {
       formatter: function() {
         return '<b>'+ this.x +'</b><br/>'+
           this.series.name +': '+ this.y +'<br/>'+
           'Total: '+ this.point.stackTotal;
       }
     },
     plotOptions: {
       column: {
         stacking: 'normal',
         dataLabels: {
           enabled: true,
           color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
           style: {
             textShadow: '0 0 3px black, 0 0 3px black'
           }
         }
       }
     },
     series: [{
       name: '蘋果',
       data: [58, 31, 49, 12, 35,65,98]
     }, {
       name: '梨子',
       data: [12, 45, 63, 24, 17,87,35]
     }, {
       name: '桃子',
       data: [67, 89, 47, 27, 58,67,34]
     }, {
       name: '橘子',
       data: [54, 36, 78, 64, 35,78,94]
     }]
   });
 });
</script>
</head>
<body>
  <div id="stackedChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、運行結果

附：完整實例代碼點擊此處本站下載。

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

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

jQuery+CSS3實現四種應用廣泛的導航條制作實例詳解
這篇文章主要介紹了jQuery+CSS3實現多種類型的導航條制作實例詳解的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09
修改jquery.lazyload.js實現頁面延遲載入
jquery.lazyload.js并未真正的實現頁面延遲載入，它的實現原理是頁面載入完畢后將html中所有img標簽的src屬性都替換為空，把src的初始值存儲到一個自定義的屬性中，當頁面滾動到img標簽位置時再將圖片載入進來。
2010-12-12
jQuery中的each()詳細介紹(推薦)
jquery中的each()非常好用，用起來非常的爽，下面小編給大家介紹jquery中each()的用法詳細介紹，感興趣的朋友一起看看吧
2016-05-05
EasyUi 打開對話框后控件賦值及賦值后不顯示的問題解決辦法
這篇文章主要介紹了easyUi 打開對話框后控件賦值，以及賦值后不顯示的問題解決辦法，解決方法非常簡單，只需要將賦值語句修改下就好，下面小編給大家簡單介紹下，需要的朋友參考下
2017-01-01
輕松學習jQuery插件EasyUI EasyUI表單驗證
輕松學習jQuery插件EasyUI，本文的重點在于EasyUI表單驗證，并告訴大家如何提交表單，感興趣的小伙伴們可以參考一下
2015-12-12
jQuery選擇頭像并實時顯示的代碼
jQuery選擇頭像并實時顯示的代碼，以前腳本之家用js實現了，這里使用jquery實現的。
2010-06-06
jQuery中ajax的load()與post()方法實例詳解
這篇文章主要介紹了jQuery中ajax的load()與post()方法,結合實例詳細分析了jQuery中l(wèi)oad()與post()方法實現ajax交互的相關技巧與注意事項,需要的朋友可以參考下
2016-01-01
淺析jQuery中常用的元素查找方法總結
本篇文章是對jQuery中常用的元素查找方法進行了詳細的總結和介紹，需要的朋友參考下
2013-07-07
jQuery之ajax刪除詳解
ajax是局部刷新。用jQuery來實現，會簡化很多。下面進行詳細的說明，結合一個ajax刪除的案例來進行
2014-02-02
Jquery修改頁面標題title其它JS失效的解決方法
這篇文章主要介紹了Jquery修改頁面標題title其它JS失效的解決方法,很簡單，很實用，需要的朋友可以參考下
2014-10-10