jquery flot 在节点上显示提示
来源:互联网 发布:矩阵扰动 编辑:程序博客网 时间:2024/04/30 08:50
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Flot Examples: Basic Usage</title><link href="../examples.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> <!-- 需要引用下面的两个 js 库文件用来显示提示和弹出框 --><script type="text/javascript"> var options = { lines: { show: true }, points: { show: true }, xaxis: { tickDecimals: 0, tickSize: 1 }, grid: { hoverable: true}// 开启 hoverable 事件 };$(function() {var d1 = [];for (var i = 0; i < 14; i += 0.5) {d1.push([i, Math.sin(i)]);}var d2 = { "label": "Europe (EU27)","data":[[0, 3], [4, 8], [8, 5], [9, 13]]};// A null signifies separate line segmentsvar d3 = [[0, 12], [7, 12], [7, 2.5], [12, 2.5]]; // 为图添加数据$.plot("#placeholder", [ d1,d2, d3 ],options); // 节点提示 function showTooltip(x, y, contents) { $('<div id="tooltip">' + contents + '</div>').css( { position: 'absolute', display: 'none', top: y + 10, left: x + 10, border: '1px solid #fdd', padding: '2px', 'background-color': '#dfeffc', opacity: 0.80 }).appendTo("body").fadeIn(200); } var previousPoint = null; // 绑定提示事件 $("#placeholder").bind("plothover", function (event, pos, item) { if (item) { if (previousPoint != item.dataIndex) { previousPoint = item.dataIndex; $("#tooltip").remove(); var y = item.datapoint[1].toFixed(0); var tip = "展现量:"; showTooltip(item.pageX, item.pageY,tip+y); } } else { $("#tooltip").remove(); previousPoint = null; } });});</script></head><body><div id="header"><h2>Basic Usage</h2></div><div id="content"><div class="demo-container"><div id="placeholder" class="demo-placeholder"></div></div><p>You don't have to do much to get an attractive plot. Create a placeholder, make sure it has dimensions (so Flot knows at what size to draw the plot), then call the plot function with your data.</p><p>The axes are automatically scaled.</p></div><div id="footer">Copyright © 2007 - 2014 IOLA and Ole Laursen</div></body></html>
0 0
- jquery flot 在节点上显示提示
- jquery flot 在节点上显示提示
- jquery.flot 在节点上显示提示
- Flot 在柱状图上显示数字
- flot柱状图上显示数字
- jquery.flot.js 生成的图表无法在IE6及部分IE8上显示的问题之一 'window.G_vmlCanvasManager' 为空或不是对象
- 使用jQuery+flot插件在网页中动态显示服务器CPU运行状态
- jquery flot
- jquery的flot显示前loading图的demo
- 多个柱状图重叠显示问题 jQuery.flot
- flot - jQuery 图表插件(jquery.flot)使用
- flot - jQuery 图表插件(jquery.flot)使用
- jquery flot 开发记录
- jquery flot 画柱状图
- jquery flot图表插件
- jquery flot画图
- flot 自定义显示日期
- flot 自定义显示日期
- Android中的Logcat使用
- 北大ACM试题分类 - 实时更新我所有的解题报告链接
- NHibernate记录
- ios block初级使用
- DSP6000的上电及供电
- jquery flot 在节点上显示提示
- UVA 1423 - Guess(拓扑排序)
- NIO组件Selector调用实例
- Mat, vector<point2f>,Iplimage等等常见类型转换
- 上位机与PLC通讯及OPC数据采集实践一
- 在openshift上构建自己的应用
- How to Find the Offending SQL from a ORA-600 or ORA-7445 Trace File (文档 ID 154170.1)转到底部 In this
- 由集成电流传感器MAX471构成±3A电流监测仪的电路
- 读书札记-2013年12月