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 表单进行客户端验证demo
Aug 24 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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
php 团购折扣计算公式
2011/11/24 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
用cssText批量修改样式
2009/08/29 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
python实现socket端口重定向示例
2014/02/10 Python
Python编程中的文件操作攻略
2015/10/16 Python
Python 功能和特点(新手必学)
2015/12/30 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python 创建守护进程的示例
2020/09/29 Python
python3中数组逆序输出方法
2020/12/01 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
写给保洁员表扬信
2014/01/08 职场文书
英语教师岗位职责
2014/03/16 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
浅析Django接口版本控制
2021/06/26 Python