flotjava_JS绘图Flot应用简单曲线图

首先对Flot做简单介绍&＃xff1a;

flot 是一个基于jquery的开源Javascript库,是一个纯粹的 jQuery Javascript 绘图库&＃xff0c;可以在客户端即时生成图形&＃xff0c;使用非常简单&＃xff0c;支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8/9, Firefox 2.x&＃43;, Safari 3.0&＃43;, Opera 9.5&＃43; 以及 Konqueror 4.x&＃43;。使用的是 Safari 最先引入的 Canvas 对象(html5中新增的对象)&＃xff0c;目前所有主流浏览器都支持该对象&＃xff0c; IE8以下等不支持的浏览器, 使用 Javascript 进行模拟。

由于浏览器的支持问题&＃xff0c;我们在做页面时一共需要三个页面&＃xff0c;JQuery库、Flot库、excanvas.js这三个文件。

做出后效果如下&＃xff0c;这个例子是对官方例子的简单修改而成的&＃xff0c;增加了一些注释。

我们来看一下代码&＃xff1a;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

$(function () {

var sin &＃61; [], cos &＃61; [];

// 初始化数据

for (var i &＃61; 0; i 

sin.push([i, Math.sin(i)]);

cos.push([i, Math.cos(i)]);

}

var plot &＃61; $.plot(

$("#placeholder"),

[ { data: sin, label: "sin函数"}, { data: cos, label: "cos函数" } ], // 数据和右上角含义的提示

{

series: {

lines: { show: true }, // 点之间是否连线

points: { show: true } // 是否显示点

},

grid: { hoverable: true, clickable: true }, // 是否可以悬浮&＃xff0c;是否可以点击

yaxis: { min: -1.2, max: 1.2 }, // Y 轴 的最大值和最小值

xaxis: { min: 0, max: 15 }      // X 轴 的最大值和最小值

});

var previousPoint &＃61; null;

// 邦定事件

$("#placeholder").bind("plothover", function (event, pos, item) {

if ($("#enableTooltip:checked").length > 0) { // 如果允许提示

if (item) {

if (previousPoint !&＃61; item.dataIndex) {

previousPoint &＃61; item.dataIndex;

$("#tooltip").remove();

var x &＃61; item.datapoint[0].toFixed(2),

y &＃61; item.datapoint[1].toFixed(2);

showTooltip(item.pageX, item.pageY,

"X:" &＃43; x &＃43; " Y:" &＃43; y);

//item.series.label &＃43; " of " &＃43; x &＃43; " &＃61; " &＃43; y); // 悬浮点时提示的内容

}

}else {

$("#tooltip").remove();

previousPoint &＃61; null;

}

}

});

// 悬浮点时进行提示

function showTooltip(x, y, contents) {

$(&＃39;

position: &＃39;absolute&＃39;,

display: &＃39;none&＃39;,

top: y &＃43; 5,

left: x &＃43; 5,

border: &＃39;1px solid #fdd&＃39;,

padding: &＃39;2px&＃39;,

&＃39;background-color&＃39;: &＃39;#fee&＃39;,

opacity: 0.80

}).appendTo("body").fadeIn(200);

}

});

Enable tooltip

以上我们初始化一些数据&＃xff0c; 然后进行设置&＃xff0c;其中可以设置是否能够提示&＃xff01;

示例简单&＃xff0c;希望能够帮助一些人吧&＃xff0c;最后示例需要的文件和示例页面如下。

推荐您有关于“ jsflot曲线绘图js绘图 ”的文章