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源码】
Apr 10 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery HTML css()方法与css类实例详解
May 20 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
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
Python 内置函数complex详解
2016/10/23 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
200行python代码实现2048游戏
2019/07/17 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
几道PHP面试题
2013/04/14 面试题
怎样写离婚协议书
2015/01/26 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
小兵张嘎观后感
2015/06/03 职场文书
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers