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 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
javascript工具库代码
Mar 29 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
js实现数组转换成json
Jun 26 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 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
神族 PROTOSS 概述
2020/03/14 星际争霸
php面向对象 字段的声明与使用
2012/06/14 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
小程序实现列表展开收起效果
2020/07/29 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
python常见的格式化输出小结
2016/12/15 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
项目建议书格式
2014/03/12 职场文书
戒赌保证书
2015/05/11 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
Python类方法总结讲解
2021/07/26 Python