JS绘图Flot如何实现可选显示曲线图功能


Posted in Javascript onOctober 16, 2020

刚刚做了可以动态去刷新的曲线图,下面再来实现一个可以选择显示那个显示值的曲线图。

首先看一下效果:

JS绘图Flot如何实现可选显示曲线图功能

下面的多选框,选择以后会触发一个事件,等同与重新绘制了曲线图。

重点是需要的数据的格式,我们来看一下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flot可选绘图测试</title>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript">
$(function () {
	// 显示的数据,注意对象格式
  var datasets = {
    "usa": {
      label: "USA",
      data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]]
    },    
    "russia": {
      label: "Russia",
      data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]]
    },
    "uk": {
      label: "UK",
      data: [[1988, 62982], [1989, 62027], [1990, 60696], [1991, 62348], [1992, 58560], [1993, 56393], [1994, 54579], [1995, 50818], [1996, 50554], [1997, 48276], [1998, 47691], [1999, 47529], [2000, 47778], [2001, 48760], [2002, 50949], [2003, 57452], [2004, 60234], [2005, 60076], [2006, 59213]]
    },
    "germany": {
      label: "Germany",
      data: [[1988, 55627], [1989, 55475], [1990, 58464], [1991, 55134], [1992, 52436], [1993, 47139], [1994, 43962], [1995, 43238], [1996, 42395], [1997, 40854], [1998, 40993], [1999, 41822], [2000, 41147], [2001, 40474], [2002, 40604], [2003, 40044], [2004, 38816], [2005, 38060], [2006, 36984]]
    },
    "denmark": {
      label: "Denmark",
      data: [[1988, 3813], [1989, 3719], [1990, 3722], [1991, 3789], [1992, 3720], [1993, 3730], [1994, 3636], [1995, 3598], [1996, 3610], [1997, 3655], [1998, 3695], [1999, 3673], [2000, 3553], [2001, 3774], [2002, 3728], [2003, 3618], [2004, 3638], [2005, 3467], [2006, 3770]]
    },
    "sweden": {
      label: "Sweden",
      data: [[1988, 6402], [1989, 6474], [1990, 6605], [1991, 6209], [1992, 6035], [1993, 6020], [1994, 6000], [1995, 6018], [1996, 3958], [1997, 5780], [1998, 5954], [1999, 6178], [2000, 6411], [2001, 5993], [2002, 5833], [2003, 5791], [2004, 5450], [2005, 5521], [2006, 5271]]
    },
    "norway": {
      label: "Norway",
      data: [[1988, 4382], [1989, 4498], [1990, 4535], [1991, 4398], [1992, 4766], [1993, 4441], [1994, 4670], [1995, 4217], [1996, 4275], [1997, 4203], [1998, 4482], [1999, 4506], [2000, 4358], [2001, 4385], [2002, 5269], [2003, 5066], [2004, 5194], [2005, 4887], [2006, 4891]]
    }
  };
	// 对象要显示的颜色,使用JQuery循环,然后为对象增加一个 color 属性
  var i = 0;
  $.each(datasets, function(key, val) {
    val.color = i;
    ++i;
  });  
  // 增加选择可显示国家的多选框
  var choiceContainer = $("#choices");
  $.each(datasets, function(key, val) {
    choiceContainer.append('<br/><input type="checkbox" name="' + key +
                '" checked="checked" id="id' + key + '">' +
                '<label for="id' + key + '">'
                + val.label + '</label>');
  });
	// 为可选框增加点击事件
  choiceContainer.find("input").click(plotAccordingToChoices); 
	// 多选框点击事件,用于移除或增加某个国家的显示
  function plotAccordingToChoices() {
    var data = [];
    choiceContainer.find("input:checked").each(function () {
			// 多选框的名字
      var key = $(this).attr("name");
			// 有该属性,并且有该属性为Key的数据,则增加到显示区
      if (key && datasets[key])
        data.push(datasets[key]);
    });
		// 如果有数据则设置数据。等同与把图形重绘了,所以移除某个国家时可以不再显示
    if (data.length > 0)
      $.plot($("#placeholder"), data, {
        yaxis: { min: 0 },
        xaxis: { tickDecimals: 0 }
      });
  }
	// 调用一次以显示某写国家的值
  plotAccordingToChoices();
});
</script>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p id="choices">Show:</p>
</body>
</html>

选择某个多选框的话会显示其曲线。

以上示例来自官方并简单修改和增加了注释,希望对一些人有所帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
新鲜出炉的js tips提示效果
Apr 03 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 #Javascript
JS实现简易图片自动轮播
Oct 16 #Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 #Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 #jQuery
JS绘图Flot应用图形绘制异常解决方案
Oct 16 #Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 #Javascript
JS highcharts动态柱状图原理及实现
Oct 16 #Javascript
You might like
PHP学习之PHP变量
2006/10/09 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
python简单实现计算过期时间的方法
2015/06/09 Python
python 变量初始化空列表的例子
2019/11/28 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
触电现场处置方案
2014/05/14 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
2015年护士节活动总结
2015/02/10 职场文书
小学教师节活动总结
2015/03/20 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js