var options = {
colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"], // 设置线条的颜色
legend: {
show: true, //显示或隐藏
noColumns: 1, // number of colums in legend table //标记显示的列数
labelFormatter: null, // fn: string -> string //标记显示的形式,接受一个字符串,返回一个字符串
// labelFormatter:function(label){return "<a href="+label+">"+label+"</a>"}
labelBoxBorderColor: "#ccc", // border color for the little label boxes //边框颜色
container: null, // container (as jQuery object) to put legend in, null means default on top of graph
// 图例相对于页面的位置,$('#love')
position: "ne", // position of default legend container within plot //
// 图例相对于报表的位置,ne :图例显示在报表里面,top-left,top-right: 图例显示在报表的外面
margin: 5, // distance from grid edge to default legend container within plot
backgroundColor: null, // null means auto-detect //图例的背景颜色
backgroundOpacity: 0.85 // set to 0 to avoid background //图例背景颜色的透明度
},
xaxis: {
mode: null, // null or "time"
min: null, // min. value to show, null means set automatically //x 轴的起点
max: null, // max. value to show, null means set automatically // x 轴的终点
autoscaleMargin: null, // margin in % to add if auto-setting min/max //自动递增量 按照边缘平分或者是最小/最大
ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks //线条数量 最好是1和3之间
tickFormatter: null, // fn: number -> string 线条格式化
tickDecimals: null, // no. of decimals, null means auto //【data】号码小数位数,null表示自动
tickSize: null, // number or [number, "unit"] //线条的步长 为1时 只前进一格
minTickSize: null, // number or [number, "unit"] //最小单位【号码,“单位”】
monthNames: null, // list of names of months 列举月份的名称
timeformat: null //格式化时间 "%y年%m月%d日"
},
yaxis: {
autoscaleMargin: 0.02//y轴的边距
},
points: {
show: false, //坐标点 显示/隐藏
radius: 3, //坐标点的半径
lineWidth: 2, // in pixels //坐标圆点的边框宽度
fill: true, //坐标圆点是否填充
fillColor: "#ffffff" //填充颜色
},
lines: {
show: false, //坐标点之间的连线 显示/隐藏
lineWidth: 2, // in pixels //连线的宽度
fill: false, //范围区域是否被填充(0 为边界值)
fillColor: null //范围区域填充的颜色
},
bars: {
show: false, //柱状图 显示/隐藏
lineWidth: 2, // in pixels //柱状图边框的宽度
barWidth: 1, // in units of the x axis // 柱状图 X 轴上的宽度
fill: true, //柱状图内部是否被填充
fillColor: null //柱状图内部填充的颜色
steps: true//显示每一【data】点的起始点和结束点,
},
grid: {
color: "#545454", // primary color used for outline and labels
//报表边框,以及XY 轴,图例标签的颜色
backgroundColor: null, // null for transparent, else color //报表的背景颜色
tickColor: "#dddddd", // color used for the ticks //报表网格线的颜色
labelMargin: 3, // in pixels x轴和y轴上的数字离表格的距离
borderWidth: 2, //边框的宽度
clickable: null, //是否能点击
coloredAreas: null, // array of { x1, y1, x2, y2 } or fn: plot area -> areas
coloredAreasColor: "#f4f4f4" //http://hi.baidu.com/wcf2010/creat/blog/
},
selection: {
mode: null, // one of null, "x", "y" or "xy" //选择区域的形式
color: "#e8cfac" //被选择区域的颜色
},
shadowSize: 4 //报表阴影
};
///
/ 时间格式化
//
<script>
/**
* 时间对象的格式化;
*/
Date.prototype.format = function(format){
/*
* eg:format="YYYY-MM-dd hh:mm:ss";
*/
var o = {
"Y+":this.getFullYear(),
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
}
}
return format;
}</script>
///
父页面给参数 /
/
<%
String la2="label:"+"\'标题3\'";
String data1= "data:[[1267372799999,100],[1451663999999,100]]";//2线
String la1="label:"+"\'标题2\'";
String data2="data:[[1267372799999,800],[1451663999999,800]]";//3线
String la="label:\'"+"标题1\'";
String data0="data:[[1296489600000,128],[1296576000000,240],[1296662400000,250],[1296748800000,270],[1296835200000,350],
[1296921600000,225],[1297007999999, 525],[1297094399999, 324],[1297180799999, 623],[1297267199999, 722],[1297353599999, 821],
[1297439999999, 520],[1297526399999, 819],[1297612799999, 418],[1297699199999, 617],[1297785599999, 815],[1297871999999, 916],
[1297958399999, 617],[1298044799999, 518],[1298131199999, 412],[1298217599999, 320],[1298282399999,620.3],[1298303999999,521],
[1298347199999,721.2],[1298390399999,522],[1298476799999,423],[1298563199999,624],[1298649599999,610],[1298735999999,412],
[1298908799999,915],[1298995199999,518],[1299081599999,819],[1299167999999,320],[1299513599999,517],[1299599999999,718],]";
String pv="[{"+la+","+data0+"},{"+la1+","+data1+"}]";
String pv1="[{"+la+","+data1+"}]";
%>
<script>
var graphic_data0 ={
data:<%=pv%>,
x_min:<%=DateMin%>,
x_max:<%=DateMax%>,
x_mode:"time",
y_min:0,
y_max:1000,
ticks:3,
x_format:"%y年%m月%d日",
}
var graphic_data2={
data:<%=pve%>,
x_min:0, //模型为数字时才支持ticksize(步长)
x_max:24,
x_mode:null,
y_min:0,
y_max:1,
ticks:3,
ticksize:2,
//url must input lastx=[[],[]]
data_ajax_prefix:"/ur/a.jsp?lastx=",
data_ajax_interval:5000
}
var graphic_data4={
data:<%=pvr%>,
x_min:0, //模型为数字时才支持ticksize(步长)
x_max:24,
x_mode:null,
y_min:0,
y_max:1200,
ticks:3,
ticksize:2,
//url must input lastx=[[],[]]
data_ajax_prefix:"/ur/a.jsp?lastx=",
data_ajax_interval:5000
}
</script>
/
/// 子页面 用法
//
<div id="placeholder" style="width:100%;height:100%;border:1px;border-color:white;"></div>
<script type="text/javascript" src="/_jquery/flot/excanvas.min.js"></script>
<script type="text/javascript" src="/_jquery/jquery-v1.3.2.js"></script>
<script type="text/javascript" src="/_jquery/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/_jquery/flot/jquery.flot.selection.js"></script>
<script id="source" language="javascript" type="text/javascript">
//封装需要的属性//
var mydata = "" ; //数据
mode=null; //数据类型null or time
X_Min=null; //X轴最小值
X_Max=null; //X轴最大值
Y_Min=null; //y轴最小值
Y_Max=null; //y轴最大值
format=null; //时间格式
tick=null; //线条数
ticksize=null; //X轴的表格步长
minTickSize=null;
if(parent)
{ var pub=parent.<%=父页面传递过来的值(graphic_data0 ,或graphic_data1等)>;
mydata =pub.data;
mode=pub.x_mode;
if(mode!=null)
{
format=pub.x_format; //"%y年%m月%d日h%时%m分%s秒" hh小时mm分ss秒
}
X_Min=pub.x_min;
X_Max=pub.x_max;
Y_Min=pub.y_min;
Y_Max=pub.y_max;
ticks=pub.ticks;
ticksize=pub.ticksize;
minTickSize=pub.minTickSize;
}
//封装属性/
var options={
series:{lines: { show: true },points: { show: false }},
legend: { noColumns: 2 },
xaxis: { mode: mode,timeformat:format,min:X_Min,max:X_Max, tickSize:ticksize,tickDecimals: 0,minTickSize:minTickSize },
grid: {backgroundColor: { colors: ["#fff", "#eee"] },hoverable: true, clickable: true },
yaxis: {ticks: tick,min: Y_Min,max:Y_Max},
colors: ["#0033FF","#FF0000", "#FF0000", "#d18b2c"]
};
$("#placeholder").bind("plotselected", function (event, ranges) {
$.plot( $("#placeholder"), mydata,
$.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
}));
});
function show_data()
{
$.plot( $("#placeholder"), mydata, options);
//在图上建立一个显示坐标的图层 <!-- 开始--
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);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1].toFixed(2);
tim = new Date(x);
timfa=tim.format("YYYY年MM月dd日hh小时mm分ss秒");
if(format!=null)
{
showTooltip(item.pageX, item.pageY,timfa +"="+ y);
}
else
{
showTooltip(item.pageX, item.pageY,item.series.label+x+"为"+ y);
}
}
}
});
//在图上显示坐标 --结束-->
}
</script>
//
用的时候
<script>
show_data();
</script>