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插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python中的列表推导浅析
2014/04/26 Python
python快速查找算法应用实例
2014/09/26 Python
Python二分法搜索算法实例分析
2015/05/11 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
Python celery原理及运行流程解析
2020/06/13 Python
骨干教师培训制度
2014/01/13 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
精神病医院见习报告
2014/11/03 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
公司出差管理制度范本
2015/08/05 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
python绘制云雨图raincloud plot
2022/08/05 Python