<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[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 language="javascript" type="text/javascript" src="../jquery.flot.navigate.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>
<style type="text/css">
#placeholder .button {
position: absolute;
cursor: pointer;
}
#placeholder div.button {
font-size: smaller;
color: #999;
background-color: #eee;
padding: 2px;
}
.message {
padding-left: 50px;
font-size: smaller;
}
</style>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p class="message"></p>
<p>
<p>You selected: <span id="selection"></span></p>
<input id="clearSelection" type="button" value="Clear selection" />
<input id="setSelection" type="button" value="Select year 2k" />
</p>
<p>With the navigate plugin it is easy to add panning and zooming.
Drag to pan, double click to zoom (or use the mouse scrollwheel).</p>
<p>The plugin fires events (useful for synchronizing several
plots) and adds a couple of public methods so you can easily build
a little user interface around it, like the little buttons at the
top right in the plot.</p>
<script type="text/javascript">
$(function () {
// generate data set from a parametric function with a fractal
// look
var data = [
{
data: [[0, 2300],[20, 1500],[30, 5000]],
lines: { show: true }
// ,points: { show: true }
},
{
data: [[10000,0 ], [10000, 0]]
} ,
{
data: [[0,10000 ], [0, 10000]]
}
];
var placeholder = $("#placeholder");
var options = {
series: { lines: { show: true , fill: true}, shadowSize: 0 },
xaxis: { zoomRange: [1, 10000], panRange: [0, 10000] },
yaxis: { zoomRange: [1, 10000], panRange: [0, 10000] },
/* zoom: {
interactive: true
},
pan: {
interactive: true
},*/
selection: { mode: "x" }
};
var plot = $.plot(placeholder, data, options);
//selection start
placeholder.bind("plotselected", function (event, ranges) {
//alert(ranges.xaxis.from.toFixed(1));
$("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
var zoom = $("#zoom").attr("checked");
if (zoom)
plot = $.plot(placeholder, data,
$.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
}));
});
$("#clearSelection").click(function () {
plot.clearSelection();
});
placeholder.bind("plotunselected", function (event) {
$("#selection").text("");
});
$("#setSelection").click(function () {
var axes = plot.getAxes();
plot.setSelection({ xaxis: { from: 2000, to: 2500 } });
e.preventDefault();
});
//selection end
// show pan/zoom messages to illustrate events
placeholder.bind('plotpan', function (event, plot) {
var axes = plot.getAxes();
$(".message").html("Panning to x: " + axes.xaxis.min.toFixed(2)
+ " – " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2)
+ " – " + axes.yaxis.max.toFixed(2));
});
placeholder.bind('plotzoom', function (event, plot) {
var axes = plot.getAxes();
$(".message").html("Zooming to x: " + axes.xaxis.min.toFixed(2)
+ " – " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2)
+ " – " + axes.yaxis.max.toFixed(2));
});
// add zoom out button
$('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) {
e.preventDefault();
plot.zoomOut();
});
// add zoom in button
$('<div class="button" style="right:90px;top:20px">zoom in</div>').appendTo(placeholder).click(function (e) {
e.preventDefault();
plot.zoom();
});
//add dynamic curve start
var updateInterval = 200;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1)
updateInterval = 1;
if (updateInterval > 2000)
updateInterval = 2000;
$(this).val("" + updateInterval);
}
});
function getRandomData() {
var lastdata =data[0].data.length-1 ;
var res = new Array();
var maxTime =data[0].data[lastdata][0];
if(lastdata%2==0){
var maxTimeVal =data[0].data[lastdata][1]-310*Math.random();
}else{
var maxTimeVal =data[0].data[lastdata][1]+300*Math.random();
}
var data1 = data[0].data;
data1.push([15+maxTime, maxTimeVal]);
for (var i = 0; i < data.length; ++i)
res[0]=data[0];
return res;
}
function update() {
var redata = getRandomData();
plot.setData(redata);
// since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
//add dynamic curve end
// and add panning buttons
// little helper for taking the repetitive work out of placing
// panning arrows
function addArrow(dir, right, top, offset) {
$('<img class="button" src="arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">').appendTo(placeholder).click(function (e) {
plot.clearSelection();
e.preventDefault();
plot.pan(offset);
});
}
addArrow('left', 55, 60, { left: -300 });
addArrow('right', 25, 60, { left: 300 });
addArrow('up', 40, 45, { top: -300 });
addArrow('down', 40, 75, { top: 300 });
});
</script>
</body>
</html>
分享到:
相关推荐
标题中的"aaa.rar_593aaa.com_ecshop_www.aaa709.com_www.aaa647.com_商城"暗示了我们正在探讨的是一个经过个性化修改的ECSHOP商城项目,其中涉及到的域名可能与多个站点相关联,如593aaa.com、aaa709.com和aaa647....
【标题】"AAA.zip_3344aaa在线观看_aaa8x8x" 提供的信息主要涉及到一个基于VHDL语言设计的16x8 ROM(只读存储器)项目,而“3344aaa在线观看_aaa8x8x”这部分看起来像是无关的标签,可能是某种错误或者误输入,因此...
AAA飞机设计软件.pdf AAA飞机设计软件是一个功能强大且专业的飞机设计分析软件,旨在帮助飞机设计师、学生和研究人员快速、准确地进行飞机设计、分析和优化。下面是AAA飞机设计软件的详细知识点: 1.飞机设计分析...
H3C交换机AAA认证配置案例 H3C交换机AAA认证配置案例是一种常见的网络安全解决方案,用于确保网络设备的安全性和可靠性。本案例中,我们将介绍如何配置H3C S5500-SI Telnet用户通过Tacacs进行AAA认证的典型配置。 ...
Darcorp Advanced Aircraft Analysis V2.5.1.53 (AAA) 软件是一款面向于高级用户的飞机设计和仿真分析软件,目前广泛应用于数十个国家的各种机构,已然成为飞机设计、开发、稳定性分析以及飞行控制的工业标准软件。...
**思科AAA认证配置详解** 在IT网络领域,特别是企业级网络环境中,安全访问控制是至关重要的。Cisco(思科)设备广泛采用的AAA(Authentication、Authorization、Accounting)认证系统,为网络管理员提供了强大的...
在标题"aaa.rar_1816aaa.com_aaa.2122_ad_高速AD"中,我们可以推断这是一份与高速AD转换技术相关的压缩文件,可能包含详细的技术文档、研究报告或应用实例。1816aaa.com可能是提供该资源的网站,aaa.2122可能是文件...
### CISCO交换机配置AAA、802.1X以及VACL #### 一、启用AAA、禁用Telnet以及启用SSH 1. **启用AAA身份验证**:使用`aaa new-model`命令来启用新的AAA模型,这允许我们配置更复杂的AAA特性。 ``` Switch# conf t ...
根据提供的华为AAA配置命令及其描述,我们可以深入了解华为设备中AAA(认证、授权和计费)系统的配置过程。本文将详细解读这些配置命令背后的含义与作用,并帮助读者理解如何在华为路由器或交换机上正确地设置AAA...
### H3C配置AAA、RADIUS和TACACS+ #### 引言 随着网络规模的不断扩大及业务需求的日益多样化,网络安全与管理的重要性愈发凸显。其中,AAA(认证 Authentication、授权 Authorization、计费 Accounting)系统作为...
本文将深入探讨"aaa.rar_播放器aaa"这一主题,主要关注JMF播放器的源代码及其运行机制,帮助开发者更好地理解和运用这个平台。 JMF,全称为Java Media Framework,是Sun Microsystems公司开发的一个用于处理音频、...
《微机原理详解》 微机原理是计算机科学与技术领域的基础课程,它涉及计算机硬件系统的...本资料"aaa.rar_AAA微机原理"中的PPT和练习提供了丰富的学习资源,涵盖了上述所有主题,是深入学习微机原理的理想参考资料。
华为交换机的AAA配置与管理是网络管理员在保障网络安全和用户权限管理方面的重要任务。AAA(Authentication、Authorization、Accounting)是一种网络管理机制,包括认证、授权和计费三个环节。认证是指验证用户身份...
### H3C交换机AAA认证及Radius认证详解 #### AAA简介 AAA,即认证(Authentication)、授权(Authorization)和计费(Accounting),是一种重要的网络安全管理方式,它提供了统一的框架来配置这三个核心功能。 - **认证*...
### AAA详解:深入理解认证、授权与计费 在IT领域,AAA(Authentication, Authorization, and Accounting)是网络管理中的一项关键概念,主要用于确保网络资源的访问安全与控制。通过详细解析给定文件中的信息,...
### AAA服务器实验报告知识点 #### 实验背景与目标 本次实验旨在通过实践操作掌握AAA (Authentication, Authorization, and Accounting) 服务器的安装、配置、测试及故障排除等关键环节。通过对SPOTOTM设备中心...
《安捷伦AdvanceBio AAA氨基酸分析操作指南》提供的是一种高效、稳定的氨基酸分析解决方案,特别适合于蛋白质、抗体等生物分子的表征。该方案的核心是利用安捷伦的氨基酸分析(AAA)全程解决方案,结合了先进的液相...
### CCNP AAA实验详解 #### 实验背景与目标 CCNP(Cisco Certified Network Professional)是思科认证网络专业人员的一项高级认证,旨在验证网络工程师在实施、管理和故障排除企业网络方面的技能。本实验手册专注...
AAA协议是网络安全中的重要组成部分,它涉及三个核心概念:认证(Authentication)、授权(Authorization)和计费(Accounting)。认证主要是验证用户的身份,确认用户是否具备访问网络资源的资格。授权是指根据用户...
【Cisco AAA技术详解】 在Cisco网络环境中,AAA(Authentication, Authorization, and Accounting)是一种关键的安全管理机制,用于确保网络资源的访问控制。该技术通过验证、授权和审计三个方面来强化网络安全,...