文档章节

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

streamlong
 streamlong
发布于 2017/06/13 10:53
字数 232
阅读 40
收藏 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

粉丝 22
博文 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
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

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

Rhymo-Wu
06/18
0
0
19个 jQuery 分页插件和教程,附带实例

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

凯文加内特
2014/04/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

ES6 Promise

Promise promise是异步编程的一种解决方案 1 什么是异步? 异步模式,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则...

NDweb
23分钟前
0
0
Python百分登顶年度编程语言排行榜

今天 IEEE Spectrum 发布了 2018 年度顶级编程语言排行榜。该榜单可根据流行趋势、职业方向、语言类型等多个标准各自细分生成榜单,也可以综合多个标准进行排列,使用者可以根据自己的需求过...

六库科技
27分钟前
0
0
consul笔记

安装和启动就不说了,很简单。 注册一个服务: http://localhost:8500/v1/agent/service/register put请求,json格式内容如下 { "ID": "userServiceId", //服务id "Name": "userService", //服...

朝如青丝暮成雪
28分钟前
0
0
iOS CollectionView 的那些事

UICollectionView是开发中用的比较多的一个控件,本文记录UICollectionView在开发中常用的方法总结,包括使用UICollectionViewFlowLayout实现Grid布局、添加Header/Footer、自定义layout布局...

aron1992
28分钟前
0
0
linux tar.gz zip 解压缩 压缩命令

http://apps.hi.baidu.com/share/detail/37384818 download ADT link http://dl.google.com/android/ADT-0.9.6.zip download SDK link http://dl.google.com/Android/android-sdk_r11-linux_......

owensliu
30分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部