flot插件整合（曲线方法，多轴等）

只做曲线的插件：echarts（强烈推荐），flot。

flot官网：

http://www.flotcharts.org/

实现的效果：
1.自由放大缩小，
2.多条y轴线（或者x轴），
3.可以选择的显示哪几条线，
4.显示坐标，坐标自由选择，
5.标示线
6……等等

js到官网去下载。
这里只贴整合的代码


<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!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.selection.js"></script><script language="javascript" type="text/javascript" src="../jquery.flot.crosshair.js"></script><script language="javascript" type="text/javascript" src="../jquery.flot.threshold.js"></script></head><body><h1>Flot Examples</h1><div id="placeholder" style="width:700px;height:400px"></div><p> <p>Position axis <button class="location">left</button> or <button class="location">right</button>.</p></p><p id="choices">Show:</p><p><input id="enableTooltip" type="checkbox">Enable tooltip</p><p>You selected: <span id="selection"></span></p><p id="hoverdata">Mouse hovers at(<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p><p><input id="clearSelection" type="button" value="重置" /><br>开始时间：<input id="startTime" type="text" placehold="开始时间"><br>结束时间：<input id="endTime" type="text" placehold="结束时间"><br><input id="setSelection" type="button" value="选择" /><br>y轴的上下限：<br></p><!--  <p>Selections are really useful for zooming. Just replot thechart with min and max values for the axes set to the valuesin the "plotselected" event triggered. Enable the checkboxbelow and select a region again.</p><p><label><input id="zoom" type="checkbox" />Zoom to selection.</label></p>-->
<script type="text/javascript">
$(function () {var data = [{label: "United States",data: [[1990, 18.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3], [1996, 19.4], [1997, 20.2], [1998, 19.8], [1999, 19.9], [2000, 20.4], [2001, 20.1], [2002, 20.0], [2003, 19.8], [2004, 20.4]]},{label: "Russia", data: [[1992, 13.4], [1993, 12.2], [1994, 10.6], [1995, 10.2], [1996, 10.1], [1997, 9.7], [1998, 9.5], [1999, 9.7], [2000, 9.9], [2001, 9.9], [2002, 9.9], [2003, 10.3], [2004, 10.5]]},{label: "United Kingdom",data: [[1990, 10.0], [1991, 11.3], [1992, 9.9], [1993, 9.6], [1994, 9.5], [1995, 9.5], [1996, 9.9], [1997, 9.3], [1998, 9.2], [1999, 9.2], [2000, 9.5], [2001, 9.6], [2002, 9.3], [2003, 9.4], [2004, 9.79]]},{label: "Germany",data: [[1990, 12.4], [1991, 11.2], [1992, 10.8], [1993, 10.5], [1994, 10.4], [1995, 10.2], [1996, 10.5], [1997, 10.2], [1998, 10.1], [1999, 9.6], [2000, 9.7], [2001, 10.0], [2002, 9.7], [2003, 9.8], [2004, 9.79]]},{label: "Denmark",data: [[1990, 9.7], [1991, 12.1], [1992, 10.3], [1993, 11.3], [1994, 11.7], [1995, 10.6], [1996, 12.8], [1997, 10.8], [1998, 10.3], [1999, 9.4], [2000, 8.7], [2001, 9.0], [2002, 8.9], [2003, 10.1], [2004, 9.80]]},{label: "Sweden",yaxis:3,data: [[1990, 5.8], [1991, 6.0], [1992, 5.9], [1993, 5.5], [1994, 5.7], [1995, 5.3], [1996, 6.1], [1997, 5.4], [1998, 5.4], [1999, 5.1], [2000, 5.2], [2001, 5.4], [2002, 6.2], [2003, 5.9], [2004, 5.89]]},{label: "Norway",yaxis:2,data: [[1990, 8.3], [1991, 8.3], [1992, 7.8], [1993, 8.3], [1994, 8.4], [1995, 5.9], [1996, 6.4], [1997, 6.7], [1998, 6.9], [1999, 7.6], [2000, 7.4], [2001, 8.1], [2002, 12.5], [2003, 9.9], [2004, 19.0]]}];//选择显示不显示的var choiceContainer = $("#choices");$.each(data, 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(function(){plotAccordingToChoices();});//启动画图的方法var plotAccordingToChoices = function(){console.log(choiceContainer);var data1 = [];choiceContainer.find("input:checked").each(function () {var key = $(this).attr("name");if (key && data[key])data1.push(data[key]);});$.plot(placeholder, data1, options);}//获取点信息var previousPoint = null;$("#placeholder").bind("plothover", function (event, pos, item) {//alert("test")$("#x").text(pos.x.toFixed(2));$("#y").text(pos.y.toFixed(2));if ($("#enableTooltip:checked").length > 0) {if (item) {if (previousPoint != item.dataIndex) {previousPoint = item.dataIndex;$("#tooltip").remove();var x = item.datapoint[0].toFixed(2),y = item.datapoint[1].toFixed(2);showTooltip(item.pageX, item.pageY,item.series.label + " of " + x + " = " + y);}}else {$("#tooltip").remove();previousPoint = null;            }}});var  position ="right";var options = {series: {lines: { show: true },points: { show: true }},crosshair: { mode: "x" },//crosshair: { mode: "y" },legend: { noColumns: 2 },xaxis: { tickDecimals: 0 },//  yaxis: { min: 0 },grid: { hoverable: true, clickable: true, autoHighlight: false  } ,yaxes: [ {min: 3} , {max: 20},{// align if we are to the rightalignTicksWithAxis:  position == "right" ? 1 : null,position: position,tickFormatter: euroFormatter} ],selection: { mode: "x" }};var placeholder = $("#placeholder");placeholder.bind("plotselected", function (event, ranges) {$("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));// var zoom = $("#zoom").attr("checked");//if (zoom)var data1 = [];choiceContainer.find("input:checked").each(function () {var key = $(this).attr("name");if (key && data[key])data1.push(data[key]);});plot = $.plot(placeholder, data1,$.extend(true, {}, options, {xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }}));});placeholder.bind("plotunselected", function (event) {$("#selection").text("");});var plot = $.plot(placeholder, data, options);$("#clearSelection").click(function () {$.plot(placeholder, data, options);});$("#setSelection").click(function () {var startTime = $("#startTime").val();var endTime = $("#endTime").val();plot.setSelection({ xaxis: { from: startTime, to: endTime } });});function euroFormatter(v, axis) {return v.toFixed(axis.tickDecimals)+"$";}$(".location").click(function () {var data1 = [];choiceContainer.find("input:checked").each(function () {var key = $(this).attr("name");if (key && data[key])data1.push(data[key]);});position = $(this).text();$.plot(placeholder, data1, {series: {lines: { show: true },points: { show: true }},legend: { noColumns: 2 },xaxis: { tickDecimals: 0 },//  yaxis: { min: 0 },grid: { hoverable: true, clickable: true } ,yaxes: [ {min: 3} , {max: 20},{// align if we are to the rightalignTicksWithAxis:  position == "right" ? 1 : null,position: position,tickFormatter: euroFormatter} ],selection: { mode: "x" }});});//显示曲线信息的div
function showTooltip(x, y, contents) {$('<div id="tooltip">' + contents + '</div>').css( {position: 'absolute',display: 'none',top: y + 5,left: x + 5,border: '1px solid #fdd',padding: '2px','background-color': '#fee',opacity: 0.80}).appendTo("body").fadeIn(200);
}
});</script></body>
</html>

我觉得echarts更加丰富和强大，之后会有相关代码整合。

flot插件整合（曲线方法，多轴等）相关推荐

iOS之深入解析CocoaPods的插件机制和如何加载插件整合开发工具
一.CocoaPods 插件机制 ① Ruby 在 Ruby 中,类永远是开放的,总是可以将新的方法加入到已有的类中,除了自己的代码中,还可以用在标准库和内置类中,这个特性被称为 Ruby Open ...
曲线绕x轴旋转曲面方程_曲线绕着Ox轴旋转所得的曲面方程是______。
曲线绕着Ox轴旋转所得的曲面方程是______. 更多相关问题 [单选] 清明是民间祭奠亡者的重要时候.在这个节日里,人们会不约而同地云集在骨灰寄存处,进行祭祀活动.清明烧纸是最普遍的民俗,也是()的 ...
safari java插件故障_safari flash插件故障怎么办 mac safari flash插件故障解决方法
近几日,许多网友都在关注safari flash插件故障怎么办 mac safari flash插件故障解决方法这个话题,那么safari flash插件故障怎么办 mac safari flash插 ...
机器学习数据整合+pandas方法astype、merge、drop、to_numeric、concat等
机器学习数据整合+pandas方法astype.merge.drop.to_numeric.concat等 # 合并两个数据集的数据并进行特征处理 def combine_features(self, ...
【Android 插件化】VirtualApp 源码分析 ( 启动应用源码分析 | HomePresenterImpl 启动应用方法 | VirtualCore 启动插件应用最终方法 )
文章目录一.启动应用源码分析 1.HomeActivity 启动应用点击方法 2.HomePresenterImpl 启动应用方法 3.VirtualCore 启动插件应用最终方法一.启动应用源码 ...
tomcat 和apache的整合的方法及配置（一）
一． apache和tomcat的简介及整合的原因整合 Apache Http Server 和 Tomcat 可以提升对静态文件的处理性能.利用 Web 服务器来做负载均衡以及容错.无缝的 ...
idea装python插件_学习idea2020手动安装python插件的实现方法
本文主要介绍了idea2020手动安装python插件的实现方法,分享给大家,具体如下: 自动安装报错手动安装查看idea版本我的版本为 - 201.7846.76 查找版本并下载python插件 ...
osg第三方插件的编译方法（以jpeg插件来讲解）
osg以插件方式来扩展.加载第三方库,如果这些库在程序运行时找不到,就会报类似如下的错误:(这里以jpeg为例): 下面以jpeg为例,讲解jpeg插件的编译方法,其它库和这步骤类似. 先从库的官网下 ...
eclipse插件安装的方法
作者:xyzroundo/Yan eclipse插件安装的方法,有如下几种: 1.link方法: 将插件放到eclipse根目录的xx目录,用xx.link文件关联:(最传统) 2.p2管理:直接将插 ...

flot插件整合（曲线方法，多轴等）

flot插件整合（曲线方法，多轴等）相关推荐

最新文章

热门文章