jqplot折线图实现例子_jqplot 隐藏线-CSDN博客

本文链接：https://blog.csdn.net/SunMountain/article/details/42747209

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

摘要由CSDN通过智能技术生成

做项目需要使用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>
		<di