flotcharts入门

基本使用 placeholder

创建一个占位div来放置绘出来的图：

 1 <div id="placeholder">div> 

在这里我们只需要简单的设置div的id,plot将会修改很多属性来呈现绘制的图像。我们无需自己设置该div的样式，比如在IE7下如果设置该div的背景图就会引发问题。

然后我们需要设置placeholder的高度和宽度，因为plot库不知道如何绘制图的大小。这里我们采取直接在html中定义css：

1 <div id="placeholder" style="width:600px;height:300px">div>

同时你也可以在外部的stylesheet中定义大小，确保该div placeholder没有被display:none来标记，这样可能会导致混乱的结果。

然后在js中运行如下方法：

 1 var plot = $.plot(placeholder, data, options) 

我们来看看这三个参数和plot对象

placeholder：绘图要放置的div区域，为jquery对象或者DOM对象。
data: 绘图需要的数据集合，为一个数组
options: 自定义绘图的设置
plot: 该对象提供了一些方法来给我们使用返回值

这里是一个简单的例子：

 1 $.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } }); 

数据格式 data

(data数组对象的个数)

[[x1,y1], [x2,y2], …]
这一系列的数据即可是原始的二维坐标点数组（内部x和y值必须为数字–我们在从数据库检索出数据序列化为JSON提交至前台时要注意数据格式，如果发生一些神秘错误请确保你的输入数据为数字类型而不是字符串类型），也可以是一个对象的属性。

当输入进去的坐标值为空或者不能转换成为数字，那么该数据点就不予以绘制出。存在一个特殊的例子即如果绘制一条线时遇到坐标为空的点则该点将成为这条绘制线的截至点。后面的点将不能和前面的点相连。我们可以指定第三个坐标值来设置绘制线或者栅栏下方填充的面积值（默认是0）;

（data为obj对象的格式）

{
    color: color or number
    data: rawdata
    label: string
    lines: specific lines options
    bars: specific bars options
    points: specific points options
    xaxis: number
    yaxis: number
    clickable: boolean
    hoverable: boolean
    shadowSize: number
    highlightColor: color or number
}

color: 绘制出来的图中线条或者柱状的颜色，如果不指定将自动生成格式为CSS color规则的颜色值。

data: 为绘制的坐标点的值。格式：[ [0,0],[1,2],… ]

label: 用来指示图中该段数据对应的名字，如“该条线的说明”。

lines: 设置如果绘图为折线图时的相关属性，如show, fill, fillColor等

lines:{                     
        show:true,      
        steps: true, //线变成阶梯状       
        fill:true,                  
        fillColor:"#628712",        
        lineWidth:2,
        zero:true 默认true,坐标轴有必须有(0,0)点          
    }

bars: 设置如何绘图为柱状图时的相关属性， 如show, fill, fillColor等

points: 设置绘图中的每个点的相关属性，如形状(默认为circle)还有半径大小

{ lineWidth:2,//圆点的线条宽度
radius:3,    //圆点的半径
show:false,symbol:"circle",fill:true,
fillColor:"#628712" //圆心的填充颜色
}   
可以同时指定点和线都显示：
    lines: { show: true },
    points: { show: true }

xaxis, yaxis: 这两属性的意思是对应的该条折线或者柱子所采用的坐标轴，默认为一，如果不设定则所有的数据都采用相同一个坐标轴，如果设置其他值(2~n)则采用图像上显示的第n个坐标轴显示。

因为一个图上可以有多个图形，可以分别指定自己所对应的坐标轴，如果x相同则两个图使用相同的x轴，y相同同理，都不相同则各自使用各自的坐标轴。

clickable, hoverable: 用来设置互操作的属性，取值为bool类型。类似事件机制。false则静止该点的互操作功能。

shadowSize: 该段线条的阴影大小。为阿拉伯数字

highlightColor: 选择高亮的颜色。

Options属性

我们即可以在每个data集合中单独的设置以上的属性来实现每个折线或者条形柱的不同之处，同时也可以在option的统一设置中来集体设置以上相关属性。

legend属性：来定制折线图的label标签信息属性

legend: {
    show: boolean
    labelFormatter: null or (fn: string, series object -> string)
    labelBoxBorderColor: color
    noColumns: number
    position: "ne" or "nw" or "se" or "sw"
    margin: number of pixels or [x margin, y margin]
    backgroundColor: null or color
    backgroundOpacity: number between 0 and 1
    container: null or jQuery object/DOM element/jQuery expression
    sorted: null/false, true, "ascending", "descending", "reverse", or a comparator
}

show属性：设置是否显示该label,
labelFormatter属性: 设置点击该label的样式和行为

//初始化label时，指向该方法，返回自定义的label的显示显示形式
 labelFormatter: function(label, series){ 
     //alert(label);  
     return ''">' + label + ''; 
} 

labelBoxBorderColor: 设置label的边框颜色。
noColumns: 设定图中的label组排成多少列，默认1列
position: "ne" or "nw" or "se" or "sw"（右上，左上，右下，坐下）东南西北
margin: [20,30] 边距
backgroundColor："#458712"
backgroundOpacity:背景透明 0 - 1之间
container：设置label到指定的div中填写dom，jquery对象或jquery表达式
sorted: function(a, b) {
       //设置label的排列顺序 a，b
        return a.label == b.label ? 0 : (
            a.label > b.label ? 1 : -1
        )
}

sxes属性

x轴和y轴
xaxis, yaxis: {
    show: null or true/false
    position: "bottom" or "top" or "left" or "right"
    mode: null or "time" ("time" requires jquery.flot.time.js plugin)
    timezone: null, "browser" or timezone (only makes sense for mode: "time")

    color: null or color spec（坐标轴横线颜色）
    tickColor: null or color spec（坐标轴竖线颜色）
    font: null or font spec object

    min: null or number（坐标最小值即）
    max: null or number（坐标最大值）
    autoscaleMargin: null or number

    transform: null or fn: number -> number
    inverseTransform: null or fn: number -> number

    ticks: null or number or ticks array or (fn: axis -> ticks array)
    tickSize: number or array
    minTickSize: number or array
    tickFormatter: (fn: number, object -> string) or string
    tickDecimals: null or number

    labelWidth: null or number
    labelHeight: null or number 图形的左右移动
    reserveSpace: null or true

    tickLength: null or number 刻度线的长度

    alignTicksWithAxis: null or number
}

show: 取值为bool 是否显示坐标轴。默认值为true.

position: 设置坐标轴(标注0，1，2)所处图的位置。x轴取值”top” / “bottom”, y轴取值”left” / “right”。

mode: 设置对应的数值应该如何解析。默认值或者null值则认为对应的数值用小数来解析， 设置”time” 来解析时间戳类型的数值(需要引入jquery.flot.time.js插件来支持时间戳转换)

timezone: 设置时区。取值有null、”browser”,或者具体的时区设置。
color: （坐标轴横线颜色）
tickColor（坐标轴竖线颜色）
font: { 坐标文字的样式
size: 11,
lineHeight: 13,
style: “italic”,
weight: “bold”,
family: “sans-serif”,
variant: “small-caps”,
color: “#545454”
}
autoscaleMargin:此属性用在未指定坐标轴最大值和最小值的时候来指定该坐标轴最大的延伸值（感觉就是在压缩或者放大图）。x轴的默认值为null，y轴的默认值为0.02这样能够适应大部分用例的正常大小。

transform & inverseTransForm: 设置更改你绘图出来的数值。例如原始值需要做一些压缩或者扩张(eg.需要对小数值转换为百分数的时候)。接受的值为function.其大致运行过程是当Flot开始绘图时，每一个data源首先通过该转换函数。如下例子：x 坐标轴的值转换成为自然对数：

xaxis: {
    transform: function (v) { return Math.log(v); },
    inverseTransform: function (v) { return Math.exp(v); }
}
yaxis: {
    transform: function (v) { return -v; },
    inverseTransform: function (v) { return -v; }
}

ticks：设置x或y轴的（x轴垂直的线条有多少条，y轴垂直的线条数）
例子：
yaxis: {
ticks:20 表示与y轴垂直的虚线20条数(是整除后算出最小间距)
ticks:[1,3,7,14] 在y轴为 1，3，7，14 位置处加上垂直线
ticks: [[0, “zero”], [3, “one mark”], [5, “two marks”]]设置节点的名字
ticks:function指定一个函数
｝

tickSize：设置刻度大小
tickDecimals：刻度显示精确到小数点几位(0,1,2,3)

**

多个axes(x,y)轴

**
{
xaxes: [ { position: “top” } ],
yaxes: [ { }, { position: “right”, min: 20 } ]
}

**

Time series data

**
时间刻度的支持 需要插件 jquery.flot.time.js