jqplot 双折线显示

最新推荐文章于 2024-04-10 14:31:39 发布
最新推荐文章于 2024-04-10 14:31:39 发布
阅读量1k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 前台 文章标签： jqplot java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010256177/article/details/38037531
本文介绍了一个使用jQuery插件jqPlot实现的温湿度数据展示图表。该图表能够动态加载JSON数据，并支持用户通过按钮切换日期来查看不同的温湿度记录。此外，用户还可以选择时间段来查看连续多天的数据。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>这是线性图</title>
<link type="text/css" rel="stylesheet"	href="jqplotjs/examples/syntaxhighlighter/styles/shCoreDefault.min.css" />
<link type="text/css" rel="stylesheet"	href="jqplotjs/examples/syntaxhighlighter/styles/shThemejqPlot.min.css" />
<link rel="stylesheet" type="text/css" 	href="easyui/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/css/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/css/demo.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script class="include" type="text/javascript" src="jqplotjs/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<script class="include" type="text/javascript"	src="jqplotjs/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplotjs/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="jqplotjs/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="jqplotjs/plugins/jqplot.pointLabels.min.js"></script>
<!--放大-->
<script class="include" type="text/javascript" src="jqplotjs/plugins/jqplot.cursor.min.js"></script>
<!--必不可少的-->
<script class="include" type="text/javascript" src="jqplotjs/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="jqplotjs/js/myOwn.js"> </script>
</head>
<body>
<input type="button"  id="btn_lastDay" value="上一天"/><input type="button" id="btn_nextDay" value="下一天"/>


起始时间：<input class="easyui-datetimebox" name="paramStart" id="paramStart"> 结束时间: <input class="easyui-datetimebox" name="paramEnd" id="paramEnd"> <input type="button" value="查询" id="getForLongTime"/>

<div id="chart1" data-height="260px" data-width="480px" style="margin-top:20px; margin-left:20px;"></div>

<div id="chart2" data-height="260px" data-width="480px" style="margin-top:20px; margin-left:20px;"></div>
<script class="code" type="text/javascript">
//定义传递的时间参数变量
var paraTime = dateChange(new Date());
         //单击前一天，获取上天的数据
     $("#btn_lastDay").click(function(){
        	$("#btn_nextDay").css('display','block'); 
        	var chart1Div=document.getElementById("chart1");
        	if(chart1Div != null){
        		p = chart1Div.parentNode;
        		p.removeChild(chart1Div);  //删除一个div
        		var createDiv = document.createElement("div");
        		createDiv.id = "chart1";
        		document.body.appendChild(createDiv); //创建一个div
        	}
        	paraTime = getLastDay(paraTime);
        	getData(1,paraTime)
        });
    //单击获取后一天的数据
     $("#btn_nextDay").click(function(){
        	paraTime = getNextDay(paraTime);
        	if(paraTime > dateChange(new Date()))
        		{
        		alert("亲，还没有到" + paraTime + "者天哦，显示的还是今天的数据");
        		paraTime = getLastDay(paraTime);
        		}else{
        			var chart1Div=document.getElementById("chart1");
                	if(chart1Div != null){
                		p = chart1Div.parentNode;
                		p.removeChild(chart1Div);  //删除一个div
                		var createDiv = document.createElement("div");
                		createDiv.id = "chart1";
                		document.body.appendChild(createDiv); //创建一个div
                	}
        			getData(1,paraTime);
        		}
        });
   //获取一段时间里面的数据
    $("#getForLongTime").click(function(){
    	$("#chart1").css('display','none'); 
    	var chart1Div=document.getElementById("chart2");
    	if(chart1Div != null){
    		p = chart1Div.parentNode;
    		p.removeChild(chart1Div);  //删除一个div
    		var createDiv = document.createElement("div");
    		createDiv.id = "chart2";
    		document.body.appendChild(createDiv); //创建一个div
    	}
    	var paraStart =  $("#paramStart").datetimebox('getValue')+""; 
    	var paraEnd = $("#paramEnd").datetimebox('getValue')+"";
    	paraStart = dateChange(paraStart);
    	paraEnd = getNextDay(paraEnd);
    	  var ajaxDataRenderer = function(url, plot, options) {
  		    var ret =[] ;
  		    $.ajax({
  		      async: false,
  		      url: url,
  		      dataType:"json",
  		      success: function(data) {
  		    	 var dataList=[];   //用来存放最终数据的一个数组
  		    	 var temList=[];    //用来存放温度的数组
  		    	 var hList=[];      //用来存放湿度的数组
  		    	 $.each(data, function (i, datas) {  //遍历每个花括号
  		    		 if(i==0){    //表示的是存放温度的一个花括号里面的数据
  		    		 for(var item in datas){
  		    			 var tem=[];
  		    			 tem.push(item);  //item是那个键，比如时间
  		    			 tem.push(datas[item]); //datas[item]获取那个键对应的值
  		    			 temList.push(tem);  //把上面获取到的一组数据存放到一个数据里面
  		    			 }
  		    		 }else{     //其他的表示存放的是存放湿度的一个花括号
  		    			 for(var item in datas){
    		    			 var hum=[];
    		    			 hum.push(item);
    		    			 hum.push(datas[item]);
    		    			 hList.push(hum);
    		    			 }
  		    		 }
                 });
  		    	 dataList.push(temList);
  		    	 dataList.push(hList);
  		         ret=dataList;
  		      }
  		    });
  		    return ret;
  		  };
    	
  		 var jsonurl = "json/getLogTemperature.d?flag=2¶mStart="+paraStart+"¶mEnd="+paraEnd;	
    	         var plot1 = $.jqplot('chart2', jsonurl, {
    	        	  title: '温湿度显示图',
    	        		 title: "温湿度显示图",
    	        	  	 animate: true,   //将线条缓缓的加载出来
    	        	     dataRenderer: ajaxDataRenderer,   //外部数据加载方式
    	        	  	    dataRendererOptions: {
    	        	  	      unusedOptionalUrl: jsonurl
    	        	  	    },
    	        	  	    seriesDefaults: {   //将线以弯曲的形式显示
    	        	              rendererOptions: {
    	        	                  smooth: true
    	        	              }
    	        	          },
    	             series: [{},{yaxis:'y2axis'}],
    	             axesDefaults:{   //axesDefaults指定的参数配置，适用于所有轴。这里是指x，y轴的label用canvas画出
    	             	  useSeriesColor:true//如果有多个纵（横）坐标轴，通过该属性设置这些坐标轴是否以不同颜色显示 
    	             },  
    	             axes: {
    	            	 xaxis: {
    	            		 renderer:$.jqplot.DateAxisRenderer,
    	                     tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    	                     tickOptions: {
    	                       angle: -30,
    	                       formatString: '%Y-%m-%d'
    	                     } ,
    	                 	  label:'时间'
    	                  },
    	                 	   yaxis: {
    	                      	  label:'温度',
    	                      	 tickOptions:{
    	                              labelPosition: 'middle',
    	                              angle:-30
    	                          },
    	                      	 rendererOptions: {
    	                              forceTickAt0: true
    	                          }
    	                      	}, 
    	                        y2axis: {
    	                           label:'湿度',
    	                           tickOptions:{
    	                               labelPosition:'middle',
    	                               angle:-30
    	                           },
    	                           rendererOptions: {
    	                               alignTicks: true,
    	                               forceTickAt0: true
    	                               }
    	                         }
    	                     },
    	             cursor:{
    	                 show: true,
    	                 zoom: true
    	             }
    	         });
    });
    
    $(document).ready(
    		getData(1,paraTime)
    		);
    
    function getData(flag,parameterTime){
  	  var ajaxDataRenderer = function(url, plot, options) {
		    var ret = "{}" ;
		    $.ajax({
		      async: false,
		      url: url,
		      dataType:"json",
		      success: function(data) {
		    	 var dataList=[];   //用来存放最终数据的一个数组
		    	 var temList=[];    //用来存放温度的数组
		    	 var hList=[];      //用来存放湿度的数组
		    	 $.each(data, function (i, datas) {  //遍历每个花括号
		    		 if(i==0){    //表示的是存放温度的一个花括号里面的数据
		    		 for(var item in datas){
		    			 var tem=[];
		    			 tem.push(item);  //item是那个键，比如时间
		    			 tem.push(datas[item]); //datas[item]获取那个键对应的值
		    			 temList.push(tem);  //把上面获取到的一组数据存放到一个数据里面
		    			 }
		    		 }else{     //其他的表示存放的是存放湿度的一个花括号
		    			 for(var item in datas){
  		    			 var hum=[];
  		    			 hum.push(item);
  		    			 hum.push(datas[item]);
  		    			 hList.push(hum);
  		    			 }
		    		 }
               });
		    	 dataList.push(temList);
		    	 dataList.push(hList);
		         ret=dataList;
		      }
		    });
		    if(ret==","){
		    	alert(parameterTime + "：这天没有记录");
		    }
		    return ret;
		  };
  var jsonurl = "json/getLogTemperature.d?flag="+flag+"¶meterTime="+parameterTime;
  $.jqplot.config.enablePlugins = true;
  var plot1 = $.jqplot('chart1', jsonurl,  {
  	 title: "温湿度显示图",
  	 animate: true,   //将线条缓缓的加载出来
     dataRenderer: ajaxDataRenderer,   //外部数据加载方式
  	    dataRendererOptions: {
  	      unusedOptionalUrl: jsonurl
  	    },
  	    seriesDefaults: {   //将线以弯曲的形式显示
              rendererOptions: {
                  smooth: true
              }
             // showMarker: true
          },
    series:[{},{yaxis:'y2axis'}],    //series参数是一个对象数组，一个对象对应一组数据 ,主要是为了显示两个y轴
    axesDefaults:{   //axesDefaults指定的参数配置，适用于所有轴。这里是指x，y轴的label用canvas画出
  	  useSeriesColor:true//如果有多个纵（横）坐标轴，通过该属性设置这些坐标轴是否以不同颜色显示 
  },  
    axes: {
  	  xaxis: {
      	  renderer:$.jqplot.CategoryAxisRenderer, // x轴用数据里面的数组第一个元素
      	  label:'时间'
      	   },
      	   yaxis: {
           	  label:'温度',
           	 tickOptions:{
                   labelPosition: 'middle',
                   angle:-30
               },
           	 rendererOptions: {
                   forceTickAt0: true
               }
           	}, 
             y2axis: {
                label:'湿度',
                tickOptions:{
                    labelPosition:'middle',
                    angle:-30
                },
                rendererOptions: {
                    alignTicks: true,
                    forceTickAt0: true
                    }
              }
    }, highlighter: {  //当鼠标移到上面时将数据显示出来
          show: true, 
          showLabel: true, 
          tooltipAxes: 'y',
          sizeAdjust:01 , tooltipLocation : 'ne'
      }
  }); 
    }
</script>  


</body>
</html>

</pre><pre name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;">效果图</span>


<img src="https://img-blog.csdn.net/20140722110019411?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDI1NjE3Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

 

推荐一个挺好用的jquery插件，jquery.jqplot.js（画图）,此处简略得说一下折线图的画法
风过留痕
06-27 1873
因项目需要，需要写一个折线图。在网上找了下，发现了这个jqplot，发现挺好用的给大家推荐yix
jQuery插件：jqplot图表绘制插件详解
weixin_34097242的博客
05-15 269
一、关于jqplot jqplot是一个十分强大的jQuery绘制图表的插件，支持折线图、柱状图、饼图等等多种形态。其官方网址为：http://www.jqplot.com/ 源代码托管在bitbucket上：https://bitbucket.org/cleonello/jqplot/ 由于其文档写的十分ugly，所以给使用增加了不少难度。本文试图对其使用作一梳理。文中所用案例来源于互联网...
【jqPlot】jqPlot折线图
你是我的信仰
07-12 253
1）首先引入必须的css和js文件 &lt;link href="&lt;%=contextPath %&gt;/lib/jqplot/jquery.jqplot.css" rel="stylesheet" type="text/css" /&gt; &lt;script type="text/javascript" src="&lt;%=contextPath
jqplot画折线图
weixin_34210740的博客
06-14 174
<html> <head> <title>practiseandtemplet</title> <metahttp-equiv="content-type"content="text/html;charset=utf-8"/> <scripttype="text/javascript"src="j...
PHP使用JpGraph绘制折线图
06-03 279
PHP使用JpGraph绘制折线图 下载jpgraph类库，使用的是src目录下的类文件。 require_once './src/jpgraph.php'; require_once './src/jpgraph_line.php'; //创建统计图对象,宽，高 $graph = new Graph(1993, 766); //设置背景，注意要把主题给...
Jqplot之折线图
08-07
NULL 博文链接：https://antlove.iteye.com/blog/2116774
jqplot折线图和柱状图
05-23
以下是对 jqPlot 在生成折线图和柱状图方面的详细说明。 ### 1. jqPlot简介 jqPlot 是一个轻量级的JavaScript图表库，它依赖于jQuery框架，因此在使用前需要引入jQuery库。jqPlot 支持多种浏览器，包括IE6+、Fire...
echarts 双折线图 实现 与虚线
05-15
根据提供的信息，我们可以深入探讨如何在 ECharts 中实现双折线图，并且让其中一条折线显示为虚线。此示例代码虽然未完全展示，但已经足够让我们理解其核心概念和技术要点。 ### 一、ECharts 双折线图简介 #### ...
jqplot多条折线拖动的设定
10-29
在本教程中，我们将深入探讨如何使用jqPlot库创建一个具有多条可拖动折线图的设置。jqPlot是一个JavaScript图表库，它允许开发者轻松地在网页上绘制各种图表，包括折线图、柱状图等。在这个特定的例子中，我们将关注...
php绘制坐标曲线,php使用Jpgraph绘制复杂X-Y坐标图的方法
weixin_42390525的博客
03-11 302
这篇文章主要介绍了php使用Jpgraph绘制复杂X-Y坐标图的方法,通过设置图像阴影、边距、字体、颜色、曲线等实现Jpgraph绘制复杂坐标图的功能,非常简单实用,需要的本文实例讲述了php使用Jpgraph绘制复杂X-Y坐标图的方法。分享给大家供大家参考。具体实现方法如下：include ("src/jpgraph.php");include ("src/jpgraph_line.php");...
图形化工具jqplot使用梳理4-多折线及多坐标轴处理
跃笔书辉
03-25 351
 多折线图及多坐标轴实例应用 var plot1 = $.jqplot('chart', [line2,line1], { //集合的数量          title:'${title}',      series:[                 {//和集合的数据保存一致，否则会默认初始化                lineWidth: .5, //指定折线的宽度         ...
使用jquery图表插件jqplot之折线图
caihuajian235的专栏
02-14 9706
首先一个简单的折线图： 直接上代码：   chart                             demo.js: $(document).ready(function(){ var data=[[3,7,9,1,4,6,8,2,5]];//这里是折线点的数据，格式[x,y],这里只写了一组
3、echarts配置项-xAxis
qq_53408739的博客
10-15 3949
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置。属性防止同个位置多个 x 轴的重叠。
vue中使用echarts绘制双Y轴图表时，刻度没有对齐的两种解决方法
最新发布
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
04-10 6377
splitNumber：坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对’value’和’log’类型的轴有效。根据上面的原因去分析，要想左右的刻度线一致，分隔的段数是必须是一样的，这样才能重合。刻度在显示时，分割段数不一样，导致左右的刻度线不一致，不能重合在一起。interval：强制设置坐标轴分割间隔。从 v5.3.0 开始支持。
echarts怎么设置双纵坐标并且可以缩放，自适应浏览器
weixin_49826079的博客
03-17 3687
echarts怎么设置双纵坐标并且可以缩放，自适应浏览器
04-Echarts简化系列之：直角坐标系 xAxis 和 yAxis
youyudehan的博客
11-01 1322
Echarts 中的直角坐标系 xAxis 和 yAxis配置以及标题名称富文本使用基本示例
Echarts柱状图
热门推荐
03-16 3万+
图1： <template> <div id="chartBar" style="width: 700px; height: 300px"></div> </template> <script> import echarts from "echarts"; export default { data() { return { chartBar: null, category: [
vue+echarts折线图使用两条Y轴
qq_32166301的博客
06-21 640
vue+echarts折线图设置两条Y轴
利用jqplot实现动态折线图与柱状图绘制
- **插件应用**：jqPlot社区提供了大量插件，用于添加额外的功能，比如缩放、拖动、高亮显示等。 #### 5. 文件名称列表分析 - **折线图**：此文件名暗示了该文件将详细解释如何通过jqPlot创建折线图。可能包括如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值