jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】


Posted in jQuery onMarch 21, 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(){
     $('#columnChart').highcharts({
       chart: {
         type: 'column'
       },
       title: {
         text: '(3water.com统计)2016年月收入'
       },
       subtitle: {
         text: '月收入'
       },
       xAxis: {
         categories: [
           '一月',
           '二月',
           '三月',
           '四月',
           '五月',
           '六月',
           '七月',
           '八月',
           '九月',
           '十月',
           '十一月',
           '十二月'
         ]
       },
       yAxis: {
         min: 0,
         title: {
           text: '收入 (¥)'
         }
       },
       tooltip: {
         headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
         pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
           '<td style="padding:0"><b>{point.y:.1f} 元</b></td></tr>',
         footerFormat: '</table>',
         shared: true,
         useHTML: true
       },
       plotOptions: {
         column: {
           pointPadding: 0.2,
           borderWidth: 0
         }
       },
       series: [{
         name: '张三',
         data: [4995, 7169, 1064, 7292, 2440, 4545, 6545, 9564, 1245, 4512, 6523, 4514]
       }, {
         name: '李思',
         data: [8361, 2354, 4512, 2356, 4515, 6451, 9865, 5455, 8254, 6562, 6945, 2356]
       }, {
         name: '王武',
         data: [4512, 9565, 6564, 2652, 3265, 1202, 7845, 9845, 2356, 7844, 5424, 6312]
       }, {
         name: '赵六',
         data: [6523, 8956, 6531, 6532, 9864, 4552, 9564, 7845, 6523, 4512, 8956, 2356]
       }]
     });
   });
</script>
</head>
<body>
  <div id="columnChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图如下:

jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】

jQuery 相关文章推荐
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jquery插件制作 自增长输入框实现代码
Aug 17 #jQuery
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 #jQuery
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
You might like
example1.php
2006/10/09 PHP
php随机抽奖实例分析
2015/03/04 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
javascript实现yield的方法
2013/11/06 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
python标准算法实现数组全排列的方法
2015/03/17 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python批量赋值操作实例
2018/10/22 Python
python实现图像外边界跟踪操作
2020/07/13 Python
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
应聘编辑职位自荐信范文
2014/01/05 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
合作经营协议书
2014/04/17 职场文书
户外活动总结范文
2014/04/30 职场文书
2014年教师节寄语
2014/08/11 职场文书
2014年体育部工作总结
2014/11/13 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
Python使用Kubernetes API访问集群
2021/05/30 Python
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers