文档章节

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

streamlong
 streamlong
发布于 2017/06/13 10:53
字数 232
阅读 31
收藏 0
点赞 0
评论 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
博文 27
码字总数 16725
作品 0
杭州
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

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

Rhymo-Wu ⋅ 前天 ⋅ 0

javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

Jquery实现京东tab切图

主要是用jquery实现tab切换,显示不同的内容。也可以用原生js实现,但是实现方式比较繁琐,这里暂时不写原生js实现。jquery相对代码少而且易于理解。 这里用了三种方式实装,在写的时候,发现...

Mrs_CoCo ⋅ 05/07 ⋅ 0

jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge ⋅ 05/19 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

JavaWeb04-HTML篇笔记(三)

1.1 案例二:表格隔行换色的案例:1.1.1 需求: 对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的选择器】 基本过滤选择器: 如果样式...

我是小谷粒 ⋅ 05/08 ⋅ 0

Zepto.js 简介(第一章)

Zepto.js 简介(第一章) 在做C端-H5的时候,很多时候会用到Zepto.js,所以在这里,我就把它整理一下。 什么是Zepto zepto是轻量级的JavaScript库,专门为移动端定制的框架 与jquery有着类似...

张靖bibibi ⋅ 昨天 ⋅ 0

JavaWeb04-HTML篇笔记(二)

1.1 使用JQuery完成定时弹出广告:1.1.1 需求: 之前使用的JS的方式完成定时弹出广告,现在使用JQuery完成同样的效果: 1.1.2 分析1.1.2.1 技术分析: 【JQuery的概述】 【JS对象和JQ对象的转...

我是小谷粒 ⋅ 05/08 ⋅ 0

jQuery中,html、val与text的区别与联系

文章作者:Tyan 博客:noahsnail.com | CSDN | 简书 本文主要介绍如何使用jQuery中的html(),text()和val()三种方法,用于读取、修改元素的html结构,元素的文本内容,以及表单元素的value值...

quincuntial ⋅ 2016/11/22 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 45分钟前 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部