Flot API

var options = {
series: {
lines: { lineWidth: 1, //指定线的宽度
fill: false,
show: true//是否显示
},
points: { radius:2,//线上的点的半径
lineWidth: 2, 
fill: true, show: true
}
},
grid: { hoverable: true, clickable: true },

xaxis: { mode: "time", timeformat: "%h:%M", minTickSize: [1, "minute"], show: false },//设置xaxis轴以时间为序列。 timeformat: "%h:%M" 设置时

间显示格式，如果x轴为时间格式，那么需要将时间转换为UTC。

将时间转换为UTC

function GetTimeStep(time) {
day = time.getHours();

time = time.setHours(8 + day);

time = new Date(time);

time = time.getTime();

return time;

}

 

使用方法为 var time=GetTimeStep(new Date("2012/5/24 10:52:11"));

不晓得为虾米，我使用的时候传入的时间格式必须是"2012/5/24 10:52:11"..... 如果乃们实验一下也必须的这种格式的话，乃们需要格式化一下自己传入的时间

yaxis: { ticks: spec ,min:minspec,max:maxspec},//ticks 可以自己指定坐标轴的显示文字spec=[10，30，50，60]；可以大小间隔不一样，但是必须是有序的
legend: { show: false }

};

grid: {  backgroundColor: "aliceblue" },//设置绘图区域的背景色

  xaxis: { mode: null, show: true ,ticks:xticks},//xticks是自己需要横坐标显示的数据的数组

类似于这样的格式：var xticks=[[0,"第一个"],[1,"第二个"],....];//这个格式的Ticks可以是无序的，顺序都被前面的0  1...的固定好了...

 yaxis: { ticks: specArry, min: minspec, max: maxspec },//设置y轴。min:设置y轴的最小值；max:设置y轴的最大值。ticks:依旧是一个需要显示的数组

 

 

xaxes: [
{ position: 'bottom' },//第一根x轴
{ position: 'top', show: false }//第二根x轴
]

yaxes: [
{ position: 'left' }

]

当有多个坐标时，需要在options里面设置坐标轴数组，position表示坐标的位置

 

var data1 = [

{
color: "#66CD00",
data: d1,
lines: { show: true, steps: true },
xaxis: 2,
yaxis: 1,
points: { radius: 1,
lineWidth: 1.5, 
fill: true,
show: false
}
}

];

data指需要显示的数据序列。

color:绘制的点与线的颜色。

lines:点之间的连接线。

steps:连接线是否是阶梯状。

xaxis:这个序列使用的x轴。在多个坐标轴中需要设置。第一根x坐标轴为：{ position: 'bottom' },第二根x坐标轴为：{ position: 'top', show: false }

xaxes: [
{ position: 'bottom' },
{ position: 'top', show: false }
]

points:设置序列上点的大小等，以及是否显示点。

 

 

多跟坐标轴时，必须添加一下代码

function getBoundingBoxForAxis(plot, axis) {
var left = axis.box.left, top = axis.box.top,
right = left + axis.box.width, bottom = top + axis.box.height;

// some ticks may stick out, enlarge the box to encompass all ticks
var cls = axis.direction + axis.n + 'Axis';
plot.getPlaceholder().find('.' + cls + ' .tickLabel').each(function () {
var pos = $(this).position();
left = Math.min(pos.left, left);
top = Math.min(pos.top, top);
right = Math.max(Math.round(pos.left) + $(this).outerWidth(), right);
bottom = Math.max(Math.round(pos.top) + $(this).outerHeight(), bottom);
});

return { left: left, top: top, width: right - left, height: bottom - top };
}

$.each(plot.getAxes(), function (i, axis) {
if (!axis.show)
return;

var box = getBoundingBoxForAxis(plot, axis);

$('<div class="axisTarget" style="position:absolute;left:' + box.left + 'px;top:' + box.top + 'px;width:' + box.width + 'px;height:' + box.height + 'px"></div>')
.data('axis.direction', axis.direction)
.data('axis.n', axis.n)
.css({ backgroundColor: "坐标轴hover时的背景色。不设置即没有任何效果", opacity: 0, cursor: "pointer" })
.appendTo(plot.getPlaceholder())
.hover(
function () { $(this).css({ opacity: 0.10 }) },
function () { $(this).css({ opacity: 0 }) }
)

});

 

说一下其tooltip，tooltip是由它自带的ShowToolTipS()方法实现的。默认原始的方法显示的tooltip都是在数据的右下角，貌似是这样的。

tooltip里面如果显示东西太多，那么当在页面的最右端时，往往不能正常显示tooltips。tooltips的一部分被遮掉了。于是我们应该获取一下鼠标位置，并获取一下页面的宽度。如果鼠标所在位置处于页面右端某个区域时，让其tooltips别死犟的往右挤，显示在点的左边即可。邪恶了...

function showTooltip(x, y, contents) {

var ev = document.onmousemove;
var mousePos = mousePosition(ev);//获取鼠标所在位置

x1 = mousePos.x;//鼠标所在位置x轴
var wsize = getPageSize();//获取页面宽度
var Wwith = wsize.WinW;//页面可是去宽度

var Whight = wsize.WinH;
var scroheight = getScrollTop();
//如果有滚动条的话，需要增加滚动条高度，以便滚动条出现时位置不会偏移

//那么当页面出现滚动条时，y轴位置就会有所便宜。文档中鼠标y轴位置=鼠标在页面可视区的高度+滚动条的高度。

y = mousePos.y + scroheight;

if (x1 >= Wwith - 50 && x1 <= Wwith) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'inline',
top: y + 2,
left: x -200,//设置toolTip出现时的左上角的位置，此时正是距离页面右边50PX范围内。那么需要将其ToolTip显示在数据点的左边。
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
else {
$('<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);
}

}

var previousPoint = null;

$(placeholder).bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));

if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;

$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
if (item.series.points.show == true) {
showTooltip(item.pageX, item.pageY,
tips[item.dataIndex]);
}
else {
showTooltip(item.pageX, item.pageY,
item.datapoint[1]);
}

}
}
else {
$("#tooltip").remove();
previousPoint = null;
}

 

});

获取鼠标位置

function mousePosition(ev) {
var x, y;
var ev = ev || window.event;
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

 

获取页面可视区高度以及宽度

function getPageSize() {

var winW, winH;
if (window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight;
}
return { WinW: winW, WinH: winH };
}

 

获取滚动条高度

function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}
else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}