jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】


Posted in Javascript onMarch 15, 2017

本文实例讲述了jQuery插件HighCharts实现的2D条状图效果。分享给大家供大家参考,具体如下:

1、实例代码:

<!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(){
   $('#barChart').highcharts({
     chart: {
       type: 'bar'
     },
     title: {
       text: '2014年某一周水果销售量'
     },
     subtitle: {
       text: ''
     },
     xAxis: {
       categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日'],
       title: {
         text: '星期'
       }
     },
     yAxis: {
       min: 0,
       title: {
         text: '数量',
         align: 'high'
       },
       labels: {
         overflow: 'justify'
       }
     },
     tooltip: {
       valueSuffix: ' kg'
     },
     plotOptions: {
       bar: {
         dataLabels: {
           enabled: true
         }
       }
     },
     legend: {
       layout: 'vertical',
       align: 'right',
       verticalAlign: 'top',
       x: -40,
       y: 100,
       floating: true,
       borderWidth: 1,
       backgroundColor: '#CCCCCC',
       shadow: true
     },
     credits: {
       enabled: true
     },
     series: [{
       name: '苹果',
       data: [1070, 3198, 6353, 2035, 8745]
     }, {
       name: '橘子',
       data: [9330, 1560, 9470, 4080, 6784]
     }, {
       name: '梨子',
       data: [2735, 9140, 4054, 7329, 3478]
     }]
   });
 });
</script>
</head>
<body>
  <div id="barChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图如下:

jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】

附:完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 #Javascript
js仿淘宝商品放大预览功能
Mar 15 #Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 #Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 #Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 #Javascript
js实现自定义进度条效果
Mar 15 #Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 #Javascript
You might like
zf框架的校验器InArray使用示例
2014/03/13 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
php加密解密字符串示例
2016/10/13 PHP
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
wxPython中文教程入门实例
2014/06/09 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
智乐游戏测试笔试题
2014/05/21 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
租房协议书
2014/04/10 职场文书
2014年城管工作总结
2014/11/20 职场文书
文艺晚会开场白
2015/05/29 职场文书
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
Vue router配置与使用分析讲解
2022/12/24 Vue.js