棣???瀵?lot??绠???浠?缁?锛?
flot ??涓?涓??轰?jquery??寮?婧?javascript搴?,??涓?涓?绾?绮圭?? jQuery JavaScript 缁??惧?锛???浠ュ?ㄥ?㈡?风???虫?剁?????惧舰锛?浣跨?ㄩ??甯哥????锛??????惧ぇ缂╁?浠ュ??榧???杩借釜绛?浜や????姐??璇ユ??浠舵???? IE6/7/8/9, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 浠ュ?? Konqueror 4.x+??浣跨?ㄧ???? Safari ????寮??ョ?? Canvas 瀵硅薄(html5涓??板???瀵硅薄)锛?????????涓绘?娴?瑙??ㄩ?芥????璇ュ?硅薄锛? IE8浠ヤ?绛?涓???????娴?瑙??? 浣跨??JavaScript 杩?琛?妯℃????
?变?娴?瑙??ㄧ????????棰?锛???浠??ㄥ??椤甸?㈡?朵??遍??瑕?涓?涓?椤甸???JQuery搴???Flot搴???excanvas.js杩?涓?涓???浠躲??
???哄??????濡?涓?锛?杩?涓?渚?瀛???瀵瑰???逛?瀛???绠???淇??硅??????锛?澧???浜?涓?浜?娉ㄩ????
?
??浠??ョ??涓?涓?浠ｇ??锛?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Flot?茬嚎??lt;/title>
<!--[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 type="text/javascript">
$(function () {
var sin = [], cos = [];
// ??濮????版??
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
var plot = $.plot(
$("#placeholder"),
[ { data: sin, label: "sin?芥??}, { data: cos, label: "cos?芥?? } ], // ?版?????充?瑙???涔?????绀? {
series: {
lines: { show: true }, // ?逛??存?????绾? points: { show: true } // ?????剧ず?? },
grid: { hoverable: true, clickable: true }, // ??????浠ユ??娴?锛???????浠ョ?瑰?? yaxis: { min: -1.2, max: 1.2 }, // Y 杞?????澶у?煎????灏??? xaxis: { min: 0, max: 15 } // X 杞?????澶у?煎????灏??? });
var previousPoint = null;
// ????浜?浠? $("#placeholder").bind("plothover", function (event, pos, item) {
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,
"X:" + x + " Y:" + y);
//item.series.label + " of " + x + " = " + y); // ??娴??规?舵??绀虹????瀹? }
}else {
$("#tooltip").remove();
previousPoint = null;
}
}
});
// ??娴??规?惰?琛???绀? 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>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px"></div>
<p><input id="enableTooltip" type="checkbox">Enable tooltip</p>
</body>
</html>
?
浠ヤ???浠???濮???涓?浜??版??锛? ?跺??杩?琛?璁剧疆锛??朵腑??浠ヨ?剧疆?????藉???绀猴?
绀轰?绠???锛?甯????藉?甯??╀?浜?浜哄?э?????绀轰???瑕?????浠跺??绀轰?椤甸?㈠?涓???
?
璇锋?ㄥ??TEYE??????????锛?http://cuisuqiang.iteye.com
??????????涓?浜哄??瀹???板??锛?http://www.javacui.com
?
![实现计算器功能[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)