文档章节

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

streamlong
 streamlong
发布于 2017/06/13 10:53
字数 232
阅读 96
收藏 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
杭州
私信 提问
15 个构建交互式图表的最佳 jQuery 插件

在这篇文章中,我们向你推荐 15 个图表库,包含从简单图表实现到高度复杂的交互式图表,希望你会喜欢。 1. Chart.js : Charting Library with HTML5 Canvas 使用HTML5 Canvas元素的Javascrip...

oschina
2013/06/22
10.9K
9
用于构建交互式图表的最佳 jQuery 图表库

对于JQuery图表来说,其重要的功能是以一个简洁和交互的方式展示繁杂的原始数据。这并不仅仅以各种颜色来渲染展示数据,而应该是更能够吸引读者和方便用户理解。 稍后介绍的某些javascript图...

oschina
2013/12/07
15.5K
24
20 个最棒的 JavaScript 图表库

每个企业在做重要决定时都倾向于做数据分析。实际上他们很多时候都是沉沦在数据里头,不知道如何跳出其中。随着大数据的到来,曾经好用的表格和图表只是不再削减它了。 企业一直寻求更好的方...

oschina
2015/06/14
17.5K
36
好用的高质量 JavaScript 库一览

编辑器 1、Code Mirror 又一款“Online Source Editor”,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。...

彭博
2012/03/13
4.6K
5
10 新鲜的 jQuery 插件(2012年1月)

1. jQuery UI Bootstrap 一个基于 Twitter Bootstrap 的 jQuery UI 主题 2. jqGrid 这是非常棒的jQuery 表格插件,在线演示:here. 3. Cloud Zoom Cloud Zoom 是一个小型的图像放大镜插件,放...

红薯
2012/02/01
4.8K
6

没有更多内容

加载失败,请刷新页面

加载更多

Linux Wireshark普通用户启动使用方案

当系统安装好Wireshark后请正常启动是否可以进行正常使用,如果不行请参考下列指导 向系统添加一个用户组 sudo groupadd wireshark //如提示此组存在可跳过 将指定用户添加到这个组中 sudo...

CHONGCHEN
今天
1
0
CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
2
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
4
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
4
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部