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

最新推荐文章于 2017-09-14 10:43:27 发布

weixin_34149796

最新推荐文章于 2017-09-14 10:43:27 发布

阅读量902

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/6tao/blog/919977

版权

为什么80%的码农都做不了架构师？>>>

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>

运行结果

输入图片说明

转载于:https://my.oschina.net/6tao/blog/919977