Flot 文档比较混乱

完整数据

[ series1, series2, ... ]

一个 series 的格式

{
  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
}

legend 参数

 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
  }

xy 坐标

xaxis, yaxis: {
show: null or true/false
position: "bottom" or "top" or "left" or "right"
mode: null or "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
}

tickLength = 0 不显示背景格子

options 写法

在 $.flot(‘#div-id’,dataArr,options) 情况下：

var options = {
    series: {
    lines, points, bars: {
      show: boolean
      lineWidth: number
      fill: boolean or number
      fillColor: null or color/gradient
    }

    points: {
      radius: number
      symbol: "circle" or function
    }

    bars: {
      barWidth: number
      align: "left" or "center"
      horizontal: boolean
    }

    lines: {
      steps: boolean
    }

    shadowSize: number
  },
  colors: [ color1, color2, ... ]
}

grid

grid: {
  show: boolean
  aboveData: boolean
  color: color
  backgroundColor: color/gradient or null
  labelMargin: number
  axisMargin: number
  markings: array of markings or (fn: axes -> array of markings)
  borderWidth: number
  borderColor: color or null
  minBorderMargin: number or null
  clickable: boolean
  hoverable: boolean
  autoHighlight: boolean
  mouseActiveRadius: number
}

borderWidth = 0 去掉最外面的黑框

动态修改数据（重画 chart）

var flot_gs=$.flot('#flot_div',data1,option1);
flot_gs.setData(data2);
flot_gs.draw();

动态修改options

把 grid.borderWidth 0 改为 10

var flot_gs=$.flot('#flot_div',data1,option1);
flot_gs.getOptions().grid.borderWidth=10;
flot_gs.draw();

setupGrid()

没有参数。重新计算 坐标轴、ticks 和 legend 等。一般放在 flot_gs.draw() 前面。

查看 object 结构

console.log(flot_bar

options 内容

console.log(flot_bar.getOptions())