flot的简单用法转帖

来源：互联网发布：淘宝会员冻结怎么解冻编辑：程序博客网时间：2024/06/01 08:25

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);

   //在图上建立一个显示坐标的图层 
   }
</script>
//////////////////////////////////////////////////////////////////
////////////////                     用的时候                                 ////////////
////////////////////////////////////////////////////////
<script>
       show_data();
</script>

flot的简单用法 转帖

flot的简单用法转帖