文档章节

JQuery Flot Bar 柱状图显示,附带条形柱提示

streamlong
 streamlong
发布于 2017/06/13 10:53
字数 232
阅读 55
收藏 0

JS导入部分

<script type="text/javascript" src="js/jQuery-2.1.4.min.js" ></script>
<script type="text/javascript" src="js/jquery.flot.min.js" ></script>
<script type="text/javascript" src="js/jquery.flot.categories.min.js" ></script>

JS部分

$(function() {
				var bar_data = {
	 	        	data: [["一月", 10], ["二月", 8], ["三月", 4], ["四月", 13], ["五月", 17], ["六月", 9]],
	 	        	color: "#3c8dbc",
		 	    };
		 	    $.plot("#bar-chart", [bar_data], {
		 	        grid: {
			 	        borderWidth: 1,
			 	        borderColor: "#f3f3f3",
			 	        tickColor: "#f3f3f3",
			 	        hoverable: true   // 开启 hoverable 事件  
		 	        },
		 	      	series: {
			 	        bars: {
			 	          show: true,
			 	          barWidth: 0.5,
			 	          align: "center"
			 	        },
				 	    showMarker: true,
			            pointLabels: { 
			               show: true, 
			            }
		 	      	},
			 	    xaxis: {
			 	    	show:true,
			 	    	mode: "categories",//这里决定柱状图显示与否,需要jquery.flot.categories.min.js导入
	 	        		tickLength: 1,
			 	    	label:'月份'
			 	    },
			 	    yaxis : {
			 	    	show:true,
			 	        label: '人数',
			 	    }  
		 	    });
		 	    
		 	    
		 	     // 节点提示  
		        function showTooltip(x, y, contents) {  
		            $('<div id="tooltip">' + contents + '</div>').css( {  
		                position: 'absolute',  
		                display: 'none',  
		                top: y - 30,  
		                left: x - 40,  
		                padding: '2px',  
		                'background-color': 'white',  
		                opacity: 0.80  
		            }).appendTo("body").fadeIn(200);  
		        }  
		  
		        var previousPoint = null;  
		        // 绑定提示事件  
		        $("#bar-chart").bind("plothover", function (event, pos, item) {  
		            if (item) {  
		                if (previousPoint != item.dataIndex) {  
		                    previousPoint = item.dataIndex;  
		                    $("#tooltip").remove();  
		                    var y = item.datapoint[1].toFixed(0);  
		  
		                    var tip = "总人数:";  
		                    showTooltip(item.pageX, item.pageY,tip+y);  
		                }  
		            }  
		            else {  
		                $("#tooltip").remove();  
		                previousPoint = null;  
		            }  
		        });  
			});

HTML部分

<body>
	<div id="bar-chart" style="height: 300px;"></div>
</body>

运行结果

输入图片说明

© 著作权归作者所有

共有 人打赏支持
streamlong

streamlong

粉丝 21
博文 45
码字总数 16725
作品 0
杭州
私信 提问
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6
Highcharts图表.net版开源,支持webform 和 mvc3,完全开源

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型:直线图...

cheng5x
2015/08/07
0
0
19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特
2014/04/30
0
0
jQuery教程:教你打造20个超级酷的视觉效果

我们都爱jQuery,因为基于它我们可以做出各种奇特的效果。下面这些特效教程都基于不同的主题,它们都包括一些很酷的视觉效果。按照下列步骤来进行重新设计,或按照这些使用的步骤用到你自己的...

ch2004
2012/04/03
0
0
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu
06/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

理解JavaScript普通函数以及箭头函数里使用的this

this 普通函数的this 普通函数的this是由动态作用域决定,它总指向于它的直接调用者。具体可以分为以下四项: this总是指向它的直接调用者, 例如 obj.func() ,那么func()里的this指的是obj...

Jack088
8分钟前
0
0
RPC框架几行代码就够了

摘自梁飞的博客 - RPC框架几行代码就够了 简易RPC框架实现: /* * Copyright 2011 Alibaba.com All right reserved. This software is the * confidential and proprietary information ......

千面人
16分钟前
16
0
10 道关于 Java 泛型的面试题

1.Java中的泛型是什么 ? 使用泛型的好处是什么? 这是在各种Java泛型面试中,一开场你就会被问到的问题中的一个,主要集中在初级和中级面试中。那些拥有Java1.4或更早版本的开发背景的人都知道...

蚂蚁-Declan
27分钟前
1
0
配置Git

1.首先在本地创建ssh key; $ ssh-keygen -t rsa -C "your_email@youremail.com" 后面的your_email@youremail.com改为你在github上注册的邮箱,之后会要求确认路径和输入密码,我们这使用默认...

15834278076
27分钟前
0
0
day126-20181024-英语流利阅读-待学习

看脸时代,男人也要化妆 Lala 2018-10-24 1.今日导读 十年前,或许绝大多数男生都认为男性化妆是一件很滑稽的事。但现在,从电视荧幕上化妆的小鲜肉,到社交媒体涌现的大批男性美妆博主、网络...

飞鱼说编程
28分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部