只做曲线的插件：echarts（强烈推荐），flot。
flot官网：
实现的效果：
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 the
chart with min and max values for the axes set to the values
in the "plotselected" event triggered. Enable the checkbox
below 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 right
alignTicksWithAxis: 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 right
alignTicksWithAxis: 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更加丰富和强大，之后会有相关代码整合。
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
