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 相关文章推荐
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
Angular的$http与$location
Dec 26 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
Vue自定义表单内容检查rules实例
Oct 30 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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
mysql 搜索之简单应用
2007/04/27 PHP
也谈php网站在线人数统计
2008/04/09 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
解析php中curl_multi的应用
2013/07/17 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
javascript实现微信分享
2014/12/23 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
Python3基础之基本数据类型概述
2014/08/13 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
基于Python正确读取资源文件
2020/09/14 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
简历中个人求职的自我评价模板
2013/11/29 职场文书
品质标语大全
2014/06/21 职场文书
个人年终总结结尾
2015/03/06 职场文书