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