脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery插件HighCharts 2D堆柱状图

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实现datatables插件的增加和删除行功能

    利用JQuery实现datatables插件的增加和删除行功能

    这篇文章给大家介绍了jquery实现datatables插件的增加和删除行的功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-01-01
  • jQuery删除一个元素后淡出效果展示删除过程的方法

    jQuery删除一个元素后淡出效果展示删除过程的方法

    这篇文章主要介绍了jQuery删除一个元素后淡出效果展示删除过程的方法,实例分析了jQuery中fadeTo及slideUp等方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • jquery ui对话框实例代码

    jquery ui对话框实例代码

    在网页设计中，不论是为了减少于由于页面跳转而带来的不友好用户体验，还是为了维持桌面应用程序的使用习惯，对话框的设计都是不可或缺的。
    2013-05-05
  • Jquery Ajax Error 调试错误的技巧

    Jquery Ajax Error 调试错误的技巧

    jquery在程序开发ajax应用程序时提高了效率，减少了需要兼容性的问题，当我们在ajax项目中，遇到ajax异步获取数据出错该怎么解决呢，我们可以通过捕捉error事件来获取出错的信息，本文给大家介绍jquery ajax error调试错误的技巧，感兴趣的朋友一起学习吧
    2015-11-11
  • EasyUI 结合JS导出Excel文件的实现方法

    EasyUI 结合JS导出Excel文件的实现方法

    下面小编就为大家带来一篇EasyUI 结合JS导出Excel文件的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 如何解决谷歌浏览器下jquery无法获取图片的尺寸

    如何解决谷歌浏览器下jquery无法获取图片的尺寸

    本章节介绍一下在谷歌浏览器下利用jquery无法获取图片尺寸的现象，而在IE和火狐浏览器下能够正常获得，当然也不是任何时候都无法获取图片尺寸，下面给大家介绍遇到此问题该如何解决
    2015-09-09
  • jquery+html仿翻页相册功能

    jquery+html仿翻页相册功能

    这篇文章主要为大家详细介绍了jquery+html仿翻页相册功能，前端实现的相册模仿功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法

    jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法

    这篇文章主要介绍了jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法,涉及针对插件源码的修改,需要的朋友可以参考下
    2016-08-08
  • jQuery CSS()方法改变现有的CSS样式

    jQuery CSS()方法改变现有的CSS样式

    css()方法在使用上具有多样性。其中有一种可接受两个输入参数：样式属性和样式值，两者之间用逗号分隔，下面通过实例为大家介绍下
    2014-08-08
  • jQuery纵向导航菜单效果实现方法

    jQuery纵向导航菜单效果实现方法

    这篇文章主要介绍了jQuery纵向导航菜单效果实现方法,可实现类似淘宝首页纵向菜单的显示效果,涉及jQuery鼠标响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下
    2016-12-12

最新评论