`
cuisuqiang
  • 浏览: 3973778 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
3feb66c0-2fb6-35ff-968a-5f5ec10ada43
Java研发技术指南
浏览量:3681246
社区版块
存档分类
最新评论

JS绘图Flot应用-可选显示曲线图

    博客分类:
  • JS
阅读更多

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

其他内容请点击查看!

首先看一下效果:

 

 

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

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

<!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>

 

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

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

 

请您到ITEYE看我的原创:http://cuisuqiang.iteye.com

或支持我的个人博客,地址:http://www.javacui.com

 

下面是需要的文件!

分享到:
评论

相关推荐

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

    刚刚做了可以动态去刷新的曲线图,下面再来实现一个可以选择显示那个显示值的曲线图。 首先看一下效果: 下面的多选框,选择以后会触发一个事件,等同与重新绘制了曲线图。 重点是需要的数据的格式,我们来看一下...

    DSP28035 CAN在线升级程序与Bootloader开发服务详解

    内容概要:本文详细介绍了基于DSP28035的CAN在线升级程序及其Bootloader开发服务。主要内容涵盖CAN通讯协议的设计与实现,包括CAN模块初始化、Hex文件解析、内存分配以及应用程序跳转等关键技术点。此外,还讨论了上位机软件的开发选择和技术难点,如超时检测、CRC校验、中断向量表重映射等。文中不仅提供了具体的代码示例,还分享了许多实践经验,如避免内存越界、处理地址扩展等问题的方法。 适合人群:从事嵌入式系统开发的技术人员,尤其是那些对DSP28035感兴趣或正在使用该处理器进行项目的开发者。 使用场景及目标:适用于需要实现远程固件更新的嵌入式设备制造商,旨在提高产品维护效率并减少物理干预的需求。通过学习本文,读者可以掌握如何构建一个稳定可靠的CAN在线升级解决方案。 其他说明:文章强调了协议设计的重要性,并指出了一些常见的错误和陷阱,帮助读者避开这些问题。同时,作者还提到了一些优化技巧,比如利用DMA加速数据传输、合理规划内存布局等,以确保系统的高性能和稳定性。

    基于UDS协议的Autosar架构Bootloader定制:支持多系列芯片的高效诊断系统开发

    内容概要:本文详细介绍了基于UDS(Unified Diagnostic Services)协议的Bootloader在Autosar架构下的定制开发过程。主要内容涵盖Autosar架构与DCM(诊断通信管理)模块的集成,以及针对不同系列芯片(如NXP S32K、Infineon TC275等)的具体实现细节。文中通过具体的代码示例展示了从初始化、诊断服务处理到跳转应用程序的全过程,并讨论了不同芯片之间的差异及其应对策略。此外,还涉及了存储器管理、数据传输优化和安全启动等方面的内容。 适合人群:从事汽车电子开发的专业人士,尤其是对Bootloader开发感兴趣的工程师和技术人员。 使用场景及目标:适用于需要深入了解和实现基于UDS协议的Bootloader定制项目的团队。主要目标是提高汽车电子系统的诊断效率和可靠性,同时确保不同芯片平台间的兼容性和性能最优化。 其他说明:文章不仅提供了理论指导,还包括大量实用的代码片段和实践经验分享,帮助读者更好地理解和应用于实际项目中。

    昆仑通态触摸屏与台达VFD-M系列变频器Modbus通讯实现频率设定与启停功能

    内容概要:本文详细介绍了如何通过Modbus协议实现昆仑通态触摸屏与台达VFD-M系列变频器之间的通讯,具体涵盖了硬件接线、关键参数设置、MCGS组态环境中的设备配置、变量定义、界面设计及脚本编写等内容。文中不仅提供了详细的参数设置方法,还分享了一些常见的调试技巧和故障排查方法,如硬件接线注意事项、参数设置要点、通讯故障解决措施等。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是那些需要进行触摸屏与变频器通讯集成工作的人员。 使用场景及目标:适用于需要通过触摸屏远程控制变频器的应用场景,如工厂自动化生产线、机械设备控制等。目标是让读者能够独立完成从硬件连接到软件编程的整个通讯系统搭建过程。 其他说明:文章强调了实际操作中的注意事项和容易忽视的细节,如硬件接线的特殊性、参数设置的准确性、通讯协议的具体应用等,有助于提高项目的成功率和稳定性。同时,提供了丰富的调试工具和方法,帮助读者快速定位和解决问题。

    750W高PF值充电机电源设计方案:基于UCC28070、ST6599和PIC16F193X的高效电源实现

    内容概要:本文详细介绍了一种750W高功率因数(PF)充电机电源方案,采用UCC28070、ST6599和PIC16F193X三款芯片组合。UCC28070用于功率因数校正(PFC),通过交错式升压电路提升PF值;ST6599负责LLC谐振变换器,确保高效功率转换;PIC16F193X作为微控制器进行智能控制。文中不仅提供了详细的原理图、设计文件和烧录程序,还分享了具体的应用代码和调试技巧。此外,引用了华南理工大学硕士学位论文,深入探讨了设计优化方法。 适合人群:电源设计工程师、电子工程专业学生、对高效电源设计感兴趣的开发者。 使用场景及目标:适用于需要高功率因数和高效能的充电机应用场景,如电动汽车充电桩、数据中心备用电源等。目标是帮助读者掌握高效电源设计的技术细节,提升产品性能。 其他说明:本文不仅提供了硬件设计思路,还包括软件编程实例,如PFC控制算法、LLC频率调整、故障保护机制等。同时强调了实际应用中的注意事项,如寄存器配置、元件选型、PCB布局等。

    基于200smart PLC与昆仑通态屏的一拖三恒压供水系统PID控制及实战经验

    内容概要:本文详细介绍了基于200smart PLC和昆仑通态触摸屏构建的一拖三恒压供水系统的实现方法及其调试经验。主要内容涵盖系统架构设计、PID控制参数整定、触摸屏配置、水泵轮换逻辑以及常见的调试技巧和注意事项。文中强调了PID控制在变频器调度中的重要性,提供了具体的代码示例和技术细节,如PID输出限幅处理、Modbus通信映射、压力反馈处理等。此外,作者还分享了许多宝贵的实战经验和教训,如避免在触摸屏上进行复杂运算、确保硬件布局合理性等。 适合人群:从事自动化控制系统设计与调试的技术人员,尤其是对PID控制和PLC编程有一定基础的研发人员。 使用场景及目标:适用于需要精确控制供水压力的工业场合,如小区二次供水、厂房循环水系统等。目标是帮助技术人员理解和掌握一拖三恒压供水系统的实现方法,提高系统的稳定性和可靠性。 其他说明:文中提到的具体参数和代码片段可供参考,但在实际应用中需根据具体情况进行适当调整。

    natsort-3.1.2.tar.gz

    该资源为natsort-3.1.2.tar.gz,欢迎下载使用哦!

    natsort-2.0.0-py2.7.egg

    该资源为natsort-2.0.0-py2.7.egg,欢迎下载使用哦!

    AI应用服装行业引入DeepSeek大模型应用方案.docx### AI应用服装行业引入DeepSeek大模型应用方案总结. 引言

    内容概要:本文详细阐述了DeepSeek大模型在服装行业的应用方案,旨在通过人工智能技术提升服装企业的运营效率和市场竞争力。文章首先介绍了服装行业的现状与挑战,指出传统模式难以应对复杂的市场变化。DeepSeek大模型凭借其强大的数据分析和模式识别能力,能够精准预测市场趋势、优化供应链管理、提升产品设计效率,并实现个性化推荐。具体应用场景包括设计灵感生成、自动化设计、虚拟试衣、需求预测、生产流程优化、精准营销、智能客服、用户体验提升等。此外,文章还探讨了数据安全与隐私保护的重要性,以及技术实施与集成的具体步骤。最后,文章展望了未来市场扩展和技术升级的方向,强调了持续优化和合作的重要性。 适用人群:服装行业的企业管理层、技术负责人、市场和销售团队、供应链管理人员。 使用场景及目标:①通过市场趋势预测和用户偏好分析,提升设计效率和产品创新;②优化供应链管理,减少库存积压和生产浪费;③实现精准营销,提高客户满意度和转化率;④通过智能客服和虚拟试衣技术,提升用户体验;⑤确保数据安全和隐私保护,建立用户信任。 阅读建议:此资源不仅涵盖技术实现的细节,还涉及业务流程的优化和管理策略的调整,建议读者结合实际业务需求,重点关注与自身工作相关的部分,并逐步推进技术的应用和创新。

    三菱FX3U PLC硬件与软件开发方案详解:C语言源码、梯形图编程及PCB设计

    内容概要:本文详细介绍了一套基于三菱FX3U PLC的完整开发方案,涵盖硬件设计和软件编程两个方面。硬件部分包括详细的原理图、PCB文件以及关键组件的选择和布局技巧,如电源模块、光耦隔离电路、继电器输出等。软件部分则涉及梯形图编程和C语言开发,展示了如何利用GX Works2进行梯形图编程,以及如何使用Keil进行C语言开发,实现复杂的控制逻辑和高效的任务调度。此外,还提供了许多调试技巧和注意事项,帮助开发者避免常见错误并提高开发效率。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是对PLC开发感兴趣的初学者和有一定经验的研发人员。 使用场景及目标:适用于需要深入了解PLC底层运作机制、掌握硬件设计和软件编程技能的场合。目标是通过实际案例和详细指导,帮助读者快速上手三菱FX3U PLC的开发,实现高效的控制系统设计。 其他说明:文中提供的代码片段和设计思路不仅有助于理解PLC的工作原理,还可以作为实际项目的参考,加速开发进程。同时,文中还分享了许多实践经验,对于解决实际开发中的问题非常有帮助。

    甲壳虫adb助手安全下载.apk

    甲壳虫adb助手安全下载.apk

    FPGA实现CAN总线控制器:基于SJA1000协议栈的Verilog/VHDL双版本工程详解与应用

    内容概要:本文详细介绍了基于SJA1000协议栈的FPGA实现CAN总线控制器的全过程。涵盖了Verilog和VHDL双版本源码、Altera和Xilinx平台的具体实现细节以及完整的testbench程序。文中深入探讨了状态机控制器、CRC校验器、位时序单元和FIFO缓存四大核心模块的设计思路和技术要点。同时,提供了详细的仿真验证方法和优化技巧,如随机延迟测试、时钟管理配置等。此外,还附带了Quartus II 13.0和ISE14.7的安装指南及常见问题解决方案。 适合人群:FPGA开发者、嵌入式系统工程师、电子工程专业学生及研究人员。 使用场景及目标:适用于希望深入了解CAN总线控制器硬件实现的技术人员,帮助他们快速掌握FPGA开发流程,完成从代码编写到仿真的全流程操作。目标是在实际项目中高效实现CAN总线通信功能,提升系统的稳定性和性能。 其他说明:本文不仅提供完整的工程代码和仿真工具,还包括详细的开发板引脚约束配置和跨平台移植指导,确保用户能够顺利进行开发和调试。

    中兴光猫G7610V2-V3.0.0P1N12固件

    中兴光猫G7610V2-V3.0.0P1N12固件

    流变学仿真方法:流变学仿真软件介绍.zip

    流变学仿真方法:流变学仿真软件介绍.zip

    自动化控制领域:昆仑通态触摸屏与ABB变频器ACS510直接通讯实现恒压供水系统

    内容概要:本文详细介绍了如何利用昆仑通态触摸屏与ABB变频器ACS510通过Modbus RTU协议实现直接通讯,构建高效的恒压供水系统。文中涵盖了硬件连接、参数设置、脚本编写、策略配置等方面的内容。通过这种方式,不仅简化了操作流程,还提高了系统的稳定性和可靠性。具体而言,文章首先解释了选择这两者的理由,接着逐步讲解了硬件接线方法、参数配置细节、脚本控制逻辑以及一些常见的调试技巧。此外,还特别提到了夜间降压逻辑、故障复位按钮等高级功能的应用。 适合人群:从事自动化控制系统设计、维护的技术人员,尤其是对恒压供水系统感兴趣的工程师。 使用场景及目标:适用于需要稳定水压供应的场合,如居民小区、商业建筑等。主要目标是通过简化操作流程、提高系统稳定性,从而实现更加智能和高效的供水管理。 其他说明:文章提供了大量实际案例和技术细节,帮助读者更好地理解和应用相关技术。同时,强调了硬件和软件相结合的重要性,分享了许多实用的经验和技巧。

    移动开发移动应用开发全栈指南:平台工具、技术要点与实战案例解析

    内容概要:本文全面介绍了移动开发的相关知识,首先概述了移动开发的概念及其重要性,随后详细介绍了iOS和Android两大主流平台的开发语言、环境及工具,并涵盖了跨平台开发框架如React Native、Flutter等。接着列举了版本控制、构建自动化、UI设计及调试测试等常用工具。文章还提供了丰富的学习资源,包括官方文档、书籍和视频教程。此外,针对移动开发中常见的性能优化、兼容性、安全性和用户体验设计等问题进行了探讨,并通过社交、电商、健身追踪和地图导航等实际案例展示了不同应用场景的技术实现。最后推荐了一些适合初学者的项目,鼓励读者实践所学知识。; 适合人群:对移动开发感兴趣的初学者,以及希望深入了解移动开发技术的开发者。; 使用场景及目标:①了解iOS和Android平台的开发环境和技术栈;②掌握跨平台开发工具的选择与使用;③学习如何解决移动开发中的性能、兼容性、安全等常见问题;④通过实战案例掌握不同类型应用的核心技术实现。; 其他说明:移动开发是一个不断发展的领域,文中提到的技术和工具可能会随行业发展而更新,建议读者持续关注最新动态并不断学习新技能。

    基于python的多种函数递归与斐波那契数列文件

    基于python的多种函数递归与斐波那契数列文件

    企业管理基于复盘的企业学习与知识管理体系构建:从经验中学习提升组织能力

    内容概要:本文详细介绍了复盘的概念、操作手法、应用场景及其对企业及个人成长的重要性。复盘源自围棋术语,指对过去的经验进行回顾和反思,以从中学习和改进。文章阐述了复盘的五大核心要素:回顾目标、评估结果、分析原因、总结经验教训和提出改进建议。复盘不仅适用于个人成长,还广泛应用于企业管理和项目管理中,能够帮助企业提升执行力、改善决策流程、优化运营效率,并最终推动组织学习和发展。文中特别强调了复盘在军队、联想集团和英国石油公司(BP)中的成功实践。 适合人群:企业管理者、项目经理、团队领导者及希望提升自我反思和学习能力的职场人士。 使用场景及目标:①帮助个人和团队从过去的经历中吸取教训,避免重复错误;②通过系统的反思和总结,提升团队的协作效率和创新能力;③促进企业内部的知识共享和文化传播,构建学习型组织;④为企业战略调整提供数据支持,确保战略目标的有效落地。 其他说明:为了使复盘成为一种常态化的工作方法和习惯,组织应加强培训,培养专业的引导者,并将复盘融入日常管理流程中。此外,复盘的成功实施还需要营造开放、坦诚的文化氛围,鼓励全员积极参与。复盘不仅仅是回顾过去,更是面向未来的持续改进工具。

Global site tag (gtag.js) - Google Analytics