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(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
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设计模式 Command(命令模式)
2011/06/26 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
PHP速成大法
2015/01/30 PHP
ThinkPHP路由详解
2015/07/27 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
来自qq的javascript面试题
2010/07/24 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
javascript中的this详解
2014/12/08 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
vue.js实现图书管理功能
2019/09/24 Javascript
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
小学教师办公室制度
2014/02/03 职场文书
求职意向书
2014/04/01 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
起诉书格式范文
2015/05/20 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
Java 异步任务计算FutureTask
2022/04/28 Java/Android