jqplot折线图实现例子

最新推荐文章于 2017-11-01 17:50:00 发布

原创最新推荐文章于 2017-11-01 17:50:00 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jqPlot #图表 #插件 #折线图 #jQuery

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用jqPlot创建折线图，并实现点击图例隐藏折线、鼠标框选区域放大等特性。示例中展示了带有两个y轴的图表，分别代表水量和热量。代码中运用了$.jqplot.EnhancedLegendRenderer渲染器，以及jqplot.cursor.js实现鼠标框选放大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目需要使用jqPlot做一个折线图表，要求要有隐藏折线等功能。网上有很多关于jqPlot参数的配置的讲解，比如jquery jqPlot API 中文使用教程，东西不是说得特别全，但是常用的基本都有了。jqPlot除了参数的配置外，非常重要的是它各种各样的插件，用起来方便，效果还好。本文中点击图示隐藏折线的功能(点击右边分类框，隐藏折线)，就是通过legend中加入$.jqplot.EnhancedLegendRenderer, 这个渲染器完成的。想要把这些都了解全了，建议去看英文的文档。

讲解外面有很多，本人实力也不算强，只给出我做的例子，作为分享，希望能帮到大家。

贴上图来看一下：

这个就是总体的图，图例有两个y轴，分别代表水量和热量

点击图上的点隐藏折现，点击右边的图示隐藏点和线

用鼠标框出一片区域之后可以放大，这个是引用jqplot.cursor.js 的效果

代码如下，我把和后台交互的东西去掉了，大家主要看图表就行了。要达到完整效果最好把里面的js文件都引全了

<!DOCTYPE html>
<html lang="en">

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!--basic styles-->		
		<link rel="stylesheet" href="../../CommonModule/bootstrap-2.3.2/css/bootstrap.css" />
		<link rel="stylesheet" href="../../CommonModule/public/css/font-awesome.css" />
		<link rel="stylesheet" href="../../CommonModule/ace/css/ace.css" />
		<link rel="stylesheet" href="../../CommonModule/ace/css/ace-responsive.css" />
		<link rel="stylesheet" href="../../CommonModule/ace/css/ace-skins.css" />
		<link rel="stylesheet" href="../../CommonModule/ace/css/datepicker.css" />
		<link rel="stylesheet" href="../../CommonModule/public/css/jquery.jqplot.css" />
		

	</head>

	<body>

		<div class="row-fluid">
			<div class="breadcrumbs" id="breadcrumbs">
				<ul class="breadcrumb">
					<li class="active" id="blockTitle">失热失水分析</li>
				</ul>
			</div>
		</div>
		<div class="row-fluid">
			<div class="row">
				<br />
			</div>
			<div class="row">
				<div class="span1"></div>
				<div class="span1" >
					<h4>统计类型:</h4>
					
				</div>
				<div class="span1">
					<select id="dateMode" style="width: 85px;">
					  <option >日统计</option>
					  <option >周统计</option>
					  <option >月统计</option>
					  <option >年统计</option>
					</select>
				</div>
				<div class="span1">
					<h4>选择日期:</h4>
				</div>
				<div class="span2" align="center">
					<div id="chooseDate" class="input-append date" data-date="2014-12-12" data-date-format="yyyy-mm-dd" >
						<input id="selectedTime" class="span10" size="32" type="text" value="2014-12-01" readonly>
						<span class="add-on"><i class="icon-th"></i></span>
					</div>
					
					<div id="chooseYear" style="display: inline;">
						<select id="selectedYear" style="width: 70px;">
						  
						</select>
						年
					</div>
					<div id="chooseMonth" style="display: inline;">
						<select id="selectedMonth" style="width: 60px;">
						  <option >01</option>
						  <option >02</option>
						  <option >03</option>
						  <option >04</option>
						  <option >05</option>
						  <option >06</option>
						  <option >07</option>
						  <option >08</option>
						  <option >09</option>
						  <option >10</option>
						  <option >11</option>
						  <option >12</option>
						</select>
						月
					</div>
					
				</div>
				

				<div class="span1">
					<h4>位置:</h4>
				</div>
				<div class="span1">
					<select id="position" style="display: inline; width: 80px;">
					  
					</select>
					
				</div>
				<div class="span2">
					<button class="btn btn-purple" id="queryChart">
						查看分析结果
						<i class="icon-chevron-right icon-white"></i>
						<i class="icon-chevron-right icon-white"></i>
					</button>
					
				</div>
				<div class="span1"></div>
				
			</div>
			<div class="row">
				<div class="span11"><!-- 只似分割xing额已 -->
					<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="90%" color=#987cb9 SIZE=1>
				</div>
			</div>
		
			<div class="row"><!--图 表-->
				<div class="span1"></div>
					<div class="span10">
						<div id="chart" style="height:400px;width:1000px; "></div> 
					</div>

			</div>
		</div>		

		


	</body>

</html>


		<script type="text/javascript" src="../../CommonModule/public/js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="../../CommonModule/public/js/bootstrap-datepicker.js" ></script>
		<script type="text/javascript" src="../../CommonModule/bootstrap-2.3.2/js/bootstrap.js" ></script>
		<script type="text/javascript" src="../../CommonModule/public/js/jquery.jqplot.js" ></script>
		<script type="text/javascript" src="../../CommonModule/public/js/jqplot.barRenderer.min.js" ></script>
		<script type="text/javascript" src="../../CommonModule/public/js/jqplot.cursor.js" ></script>
		<script type="text/javascript" src="../../CommonModule/public/js/jqplot.highlighter.min.js" ></script>
		<script type="text/javascript" src="../../CommonModule/public/js/jqplot.pointLabels.min.js" ></script>
		<script type="text/javascript" src="../../CommonModule/public/js/jqplot.canvasAxisLabelRenderer.min.js" ></script>
		<script type="text/javascript" src="../../CommonModule/public/js/jqplot.canvasTextRenderer.min.js" ></script>
		<script type="text/javascript" src="../../CommonModule/public/js/excanvas.js" ></script>
		<script type="text/javascript" src="../../CommonModule/public/js/jqplot.dateAxisRenderer.js" ></script>
		<script type="text/javascript" src="../../CommonModule/public/js/jqplot.enhancedLegendRenderer.js" ></script>


		
		<script type="text/javascript">
		
			var seriesShow = [true,true,true,true];
			initPages();
			
			
			CreatChartT('0');//静态样例
			
			
			
			
			//隐藏显示折线事件
			$('#chart').bind('jqplotClick',  function (ev,gridpos, datapos, neighbor, plot){  
			  var seriesIndex = neighbor.seriesIndex;
			  	if(seriesShow[seriesIndex])
			  	{
			  		plot.drawSeries({       
			         	showLine:false, 
			        	// showMarker:false ,       
			    	},seriesIndex); 
			    	seriesShow[seriesIndex]=false;
			  	}
			  	else
			  	{
			  		plot.drawSeries({       
			         	showLine:true, 
			        	// showMarker:false ,       
			    	},seriesIndex); 
			    	seriesShow[seriesIndex]=true;
			  	}  
			}); 
			

			//初始化元素
			function initPages()
			{
				//日期选择器
				var a = $("#chooseDate");
				a.datepicker();
				//计算可被选择的年份
				var myDate= new Date();
				var endYear=myDate.getFullYear();//结束年份
				var startYear=1993;//起始年份 
				for (var i=startYear; i<=endYear; i++)
				{
					$('#selectedYear').append(
						'<option>'+i+'</option>'
					);					
				}
				//默认选择日期
				$('#chooseYear').hide();
				$('#chooseMonth').hide();

			}
			

			
		
			//根据选择的日期类型来改变选择日期的方式
			$('#dateMode').change(function()
			{
				var nowMode = $("#dateMode").val();
				if(nowMode == '日统计' || nowMode == '周统计')
				{
					$('#chooseDate').show();
					$('#chooseYear').hide();
					$('#chooseMonth').hide();
				}
				else if(nowMode == '月统计')
				{
					$('#chooseDate').hide();
					$('#chooseYear').show();
					$('#chooseMonth').show();
				}
				else if(nowMode=='年统计')
				{
					$('#chooseDate').hide();
					$('#chooseYear').show();
					$('#chooseMonth').hide();
				}
			});
			
			//静态测试
			function CreatChartT(data)
			{
				$.jqplot('chart', [[[1, 2],[5,55.12],[10,20], [15, -201]],[[1,20],[5,5.],[10,78], [15,-20]],[[1, 0.2],[5,5.12],[10,2.0], [15, -2.1]],[[1,0.3],[5,15.12],[10,7.8], [15,-1]]],
				{
					
					title:'二级网失热失水分析图表',
					seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575"],
					axisDefaults: {
					},
					animate : true,
					animateReplot : true,
					cursor : {
						show : true,
						showTooltip: true, // 是否显示提示信息栏 
						followMouse: true, //光标的提示信息栏是否随光标（鼠标）一起移动 
						zoom : true,
						looseZoom : true,
						showTooltip : true,
						tooltipOffset: 6,  
						showTooltipUnitPosition: true,
						ooltipFormatString: '%.2f',    // 同Highlighter的tooltipFormatString  
					},
					seriesDefaults: {
						dragable: {
							color: undefined, // 当拖动数据点是，拖动线与拖动数据点颜色 
							constrainTo: 'none', //设置拖动的的范围: 'x'（只能在横向上拖动）, 
							xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
							yaxis: 'yaxis', // either 'yaxis' or 'y2axis'. 
							
						},
						
					},
					eries : [ 
					{
						pointLabels : {
							show : true
						},
						// renderer: $.jqplot.BarRenderer,
						showHighlight : true,
						yaxis : 'y2axis',
						rendererOptions : {
							// Speed up the animation a little bit.
						// This is a number of milliseconds.
						// Default for bar series is 3000.
							animation : {
								speed : 2500
							}
						}
					}, 
					{
						rendererOptions : {	
							animation : {
								speed : 2000
							}
						}
					} ],
					axes : {
						//	x轴					
						xaxis : {
							renderer:$.jqplot.CanvasAxisTickRenderer,
				            min: 0, 
						    max: 23,
						    pad:0,
						    tickOptions:{formatString:'%.1f'}, 
						 	//tickInterval: '1 year', //开始，结束，间隔时间(可以是年，月，日)
							label: "时间(小时)",
							numberTicks: 24,
							drawMajorGridlines : false,
							drawMinorGridlines : true,
							drawMajorTickMarks : false,
							rendererOptions : {
								tickInset : 0.5,
								minorTicks : 1
							}
						},
						//第一个y轴
						yaxis : {
							label:'失水量 (m³/h)',
							tickOptions : {
								formatString : "%.1f"
							},
							rendererOptions : {
								forceTickAt0 : true
							}
						},
						//第二个y轴
						y2axis : {
							show:true,
							label:'失热量  (GJ)',
							tickOptions : {
								formatString : "%.1f"
							},
							rendererOptions : {
								// align the ticks on the y2 axis with the y axis.
								alignTicks : true,
								forceTickAt0 : true
							}
						}
					},
					series:[
						//如果有多个分类需要显示，这在此处设置各个分类的相关配置属性
						//eg.设置各个分类在分类名称框中的分类名称:
						//可以理解为，每一个折现需要配置一个series，数组中的一下4块对应着4条折线
							{
								label: '失热均值分析',
							 	xaxis: 'xaxis', 
	        					yaxis: 'yaxis'
							},
							{
								label: '失热真实值',
								xaxis: 'xaxis', 
	        					yaxis: 'yaxis'
							},
							{
								label: '失水均值',
								xaxis: 'xaxis', 
	        					yaxis: 'y2axis',
	        					 markerOptions: { style: "filledSquare"}
							},
							{
								label:'失水真实值',
								xaxis: 'xaxis', 
	        					yaxis: 'y2axis',
	        					  markerOptions: { style: "filledSquare"}
							}
						], 
					highlighter : {
						show : true,
						showLabel : true,
						tooltipAxes : 'y',
						sizeAdjust : 7.5,
						tooltipLocation : 'ne'
	
					},//分类名称框
					legend: {  
						renderer: $.jqplot.EnhancedLegendRenderer,
				        show: true,//设置是否出现分类名称框（即所有分类的名称出现在图的某个位置）  
				        //location: 'ne',     // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w.  		
				        //background:'blue',        //分类名称框距图表区域背景色  
				        //textColor:'red' ,        //分类名称框距图表区域内字体颜色  
				        placement: 'outsideGrid'
				
				    },

						
				});
			}
		

			
			
			
		</script>

希望能对大家有帮助~

本人学做前台不不久，也是用什么就学什么。如果不足之处，请大大们多多指出