亦位于 选择器 > jQuery扩展选择器 :animated 选择器 选择当选择器运行时，所有的正在动画进行中的元素。 亦位于 选择器 > jQuery扩展选择器 :eq() 选择器 在匹配的集合内，选择索引为n的那个元素。 亦位于 选择器 > jQuery扩展选择器 :even 选择器 选择偶数元素，从0开始排序。参见odd。 亦位于 选择器 > jQuery扩展选择器 :first 选择器 选择第一个匹配的元素。 亦位于 选择器 > 表单选择器 :focus 选择器 选择当前正获得焦点的那个元素 亦位于 选择器 > jQuery扩展选择器 :gt() 选择器 选择匹配的集合内，所有索引号大于index的元素。 亦位于 选择器 > jQuery扩展选择器 :header 选择器 选择所有的header元素，比如说h1、h2、h3等等。 :lan
你所需要做的仅仅是制作一个新插件，以创建一个初始函数，以及一些选项（如果需要的话），把它填充进一个对象中，并把它放入于$.plot.plugins数组中。举个例子： function myCoolPluginInit(plot) { plot.coolstring = "Hello!"; }; $.plot.plugins.push({ init: myCoolPluginInit, options: { ... } }); // 如果调用了$.plot，它会返回一个plot对象，带有 // 元素属性"coolstring" 现在，给定那个可以运行在很多不同位置的插件，它是避免泄漏命名的好办法。一个常用的小技巧是把上面的行封装在立即调用的匿名函数中，像这样：(function () { inner code ... })()。To make it even more robust in c
Plot方法 从plot函数中返回的Plot对象有一些你可以调用的方法： highlight(series, datapoint) 在数据系列中高亮某些数据点。如果如果你从一个plotclick事件上获得对象，你可以指定实际对象，或者你也可以指定索引，例如，highlight(1, 3)高亮第二个序列中的第四个点（请记住，以0为基数的索引）。 unhighlight(series, datapoint) or unhighlight() 删除点的高亮，参数与highlight方法相同。 如果你不带参数地调用unhighlight方法，例如，plot.unhighlight()，所有当前的高亮点都会被删除。 setData(data) 你可以使用这来重置所用的数据。注意轴缩放、刻度、图例，等等，不会重被重新计算（使用setupGrid()可以做到它）。你之后可能会想要调用draw()。 你可
Interactivity Turning series on/off Toggling Series $(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]
你不需要做太事情就能获得一个精采的描绘。创建一个占位符，确保它有维度（因此Flot知道要绘制多大的标绘），然后用你的数据调用plot函数。 轴会自动缩放 var d1 = []; for (var i = 0; i < 14; i += 0.5) { d1.push([i, Math.sin(i)]); } var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; // 一个null符号分开了线段 var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; $.plot("#placeholder", [ d1, d2, d3 ]); // 向footer添加Flot的版本 $("#footer").prepend("Flot " + $.plot.version + " – ");
自定义数据系列 series: { lines, points, bars: { show: boolean lineWidth: number fill: boolean or number fillColor: null or color/gradient } lines, bars: { zero: boolean } points: { radius: number symbol: "circle" or function } bars: { barWidth: number align: "left", "right" or "center" horizontal: boolean } lines: { steps: boolean } shadowSize: number highlightColor: color or number } colors: [ color1, c
这里有一些Flot的示例，针对jQuery的JavaScript图表库。 基本用法 基本示例 不同的图形类型以及简单分类/字面数据 设置不同的选项以及注释一个图表 用AJAX更新图形以及实时更新 交互性 打开、关闭系列数据 矩形选区支持和缩放以及带有概览的缩放（两者都需要选区插件） 与数据点交互 平移和缩放（要用导航插件） 当窗口缩放时自动重绘（要用缩放插件） 额外的功能 使用除了圆圈之外别的符号（要用符号插件） 标绘时间序列、用zooming插件和weekends插件访问每天的数据（要用选区插件）以及time zone support 多个轴以及与轴交互 给数据设阈值（要用阈值插件） 图标堆叠（要用堆叠插件） 使用填充区域以标绘百分位数（要用区间填充插件） 用十字叉跟踪曲线要用十字叉插件 标绘预呈现图像（要用图像插件） 标绘错误长条要用错误长条插件 饼形图表（要用饼形插件） 用画布代替H
自定义轴 xaxis, yaxis: { show: null or true/false position: "bottom" or "top" or "left" or "right" mode: null or "time" ("time" requires jquery.flot.time.js plugin) timezone: null, "browser" or timezone (only makes sense for mode: "time") color: null or color spec tickColor: null or color spec font: null or font spec object min: null or number max: null or number autoscaleMargin: null or number transf
引言 只要这样调用plot函数： var plot = $.plot(placeholder, data, options) placeholder是一个jQuery对象，或者是一个DOM元素，或者是一介jQuery表达式，可以把图表放进去。必须设置好placeholder的宽度和高度，README中已经解释过了（如果你还没读过它，就去读一下它，它很简短）。plot会修改placeholder的一些属性，因此建议你简单传入一个不用于其它目的的div。确保你检查了任何想要应用给这个div的样式，例如，据报告，在IE7中，导入背景图像会成为问题。 plot函数还可以用作一个jQuery连缀属性。这种形式自然不会直接返回plot对象，但是你依然可以通过数据键"plot"来访问它，如下所示： var plot = $("#placeholder").plot(data, options).data
Flot可以处理多少数据？ Flot能轻松绘制你发送给它的所有东西，因此答案决取于浏览器。excanvas仿真用于IE浏览器（但必须带有VML），使IE浏览器成为最慢的浏览器，因此确保IE用户不是你的目标组（对于IE中的大平面图，你可以检查Flashcanvas，它可能会快一点）。 1000点不是问题，但是一旦你有了比像素宽度更多的点，你可能会开始想要缩减采样、聚合，因为这毕竟接近了图表的分辨率限制。如果你在服务器端降低采样，还可以节省带宽。 当我在使用JSON数据作为源时，Flot没有起作用 Actually, Flot loves JSON data, you just got the format wrong. Double check that you're not inputting strings instead of numbers, like [["0", "-2.13"]
关于本图表库 Flot是一个JavaScript图表库，与jQuery配合使用。请阅读我们的网站http://www.flotcharts.org/以了解更多。 请看一看我们提供的示例；它们很好地阐述了Flot可以做什么 ，而且示例的源代码可能是学会使用Flot的最快速的方法。 安装方法 只需要在你包含jQuery之后，再包含本JavaScript文件。 一般情况下，所有的支持HTML5 canvas标签的浏览器都是受支持的。 要想支持Internet Explorer 9以下的版本，你可以使用Excanvas，它是一个模拟器；用在这个示例中，与Flot绑定。你只需要用以下方式包含excanvas脚本： <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.
炫丽的JavaScript图表，与jQuery配合使用。 Flot是一个纯JavaScript图表库，与jQuery配合使用，专注于简单的用法、炫丽的外观以及互动性功能。 工作环境必须是Internet Explorer 6+、Chrome、Firefox 2+、Safari 3+和Opera 9.5+。 还有一些示例与Flot相捆绑。另外敬请浏览Flot的用法维基以了解使用Flot的用户和公司的快照以及故事。 Documentation 简短入门 常见问题 API文档 插件作者指南 Jürgen Marsch在Youtube上创建了一系列介绍Flot的视频。 升级历史描述了每个版本有什么变化。 如果你需要更多帮助，请在论坛/邮件列表上的朋友帮中发贴。你还可以看看常见问题以节省你的一些时间。 缺陷、补丁建议 可以在on the issue tracker报告Flot中发现的缺陷——但是请文
Additional Features Using other symbols than circles for points (with symbol plugin) Plotting time series, visitors per day with zooming and weekends (with selection plugin) and time zone support Multiple axes and interacting with the axes Thresholding the data (with threshold plugin) Stacked charts (with stacking plugin) Using filled areas to plot percentiles (with fillbetween plugin) Tracking cu
使用与所有jQuery UI小部件相同的抽象化来创建有状态的jQuery插件。 示例 默认功能 这个演示文档使用小部件工厂（jquery.ui.widget.js）显示了一个简单的自定义小部件。 这三个盒子以不同的方式初始化。点击它们以改变它们的背景色。观察源码以看到它如何起作用，它有大量的注释。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Widget - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.cs
相对于窗口、文档或者别的元素定位一个元素，或者相对于鼠标指针定位一个元素。 示例 默认功能 使用表单控件配置定位，或者拖曳定位元素以修改它的偏移。围绕着父元素拖曳以看到实践中的碰撞侦测。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Position - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1
在元素上切换样式类，与此同时变动所有的样式变化。 示例 toggleClass Demo 点击上面的按钮以预览该效果。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - toggleClass Demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script
在元素上添加删除样式类，与此同时变动所有的样式变化。 示例 switchClass Demo 点击上面的按钮以预览效果。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - switchClass Demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script
使用自定义效果显示或隐藏元素。 示例 Toggle Demo 点击上面的按钮以预览该效果。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - Toggle Demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jq
使用自定义效果显示元素。 示例 Show Demo 点击上面的按钮以预览该效果。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - Show Demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.co
从一个元素上删除一个样式类，与此同时变动所有的样式变化。 示例 removeClass Demo 点击上面的按钮以预览效果。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - removeClass Demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <scri