Flot_API.docxVIP

Flot参考文档下面是对绘图函数plot的调用： var plot = $.plot(placeholder, data, options)占位符placeholder是一个jQuery对象或者DOM元素或者jQuery表单式，绘图函数将把图表画在placeholder内。这个占位符需要设置高宽(这在README文档里面已经介绍过，如果你还没有阅读过现在就去阅读吧，文档很短)。plot函数画图时将修改这个占位符的内容，因此你最好使用一个空的DIV元素作为占位符，另外注意不要给占位符设置花哨的样式，比如，在IE7.0下，给占位符设置背景图将会出错。函数可以使用的数据格式会在后面说明，plot返回对象有一些方法可供调用，在后面会分开介绍。另外请注意，flot不保证plot函数内的对象被修改或删除后仍然能正常工作(废话)。Data Format数据格式flot的数据是一个数列数组(plot函数中的data参数:每条曲线一个data项参数，绘制多条曲线时，是一个数组，每个数组元素是一条曲线的data项参数)： [ series1, series2, ... ]数列可以是原始数据，也可以是数据对象，原始数据格式是由一组表示数据点的坐标值的数组构成： [ [x1, y1], [x2, y2], ... ]E.g. [ [1, 3], [2, 14.01], [3.5, 3.14] ]请注意，flot的纵横坐标值都必须是数字(即使用时间数列也是，后面会介绍到)，这是个很常见的错误，因为你很可能从数据库获取数据后没有检查数据类型就直接转化成json对象使用。如果你觉得遇到了莫名其妙的错误，请确认一下你输入的是数字而不是字符串。如果坐标为值为空 ,或者其中的一个坐标值为空，或者不是数字，或者说不能转换为数字，那么这个节点将被忽略，并且该节点前后的2个节点之间不会使用直线来连接。折线图和散点图每个节点有2个参数，直方图则有3个参数，第三个参数来指定直方图的底部位置(缺省值是0)。单个图表对象的数据格式参数如下所示： { color: color or number //颜色 data: rawdata //数据 label: string //曲线名称 lines: specific lines options //折线图坐标参数 bars: specific bars options //直方图坐标参数 points: specific points options //散点图坐标参数 xaxis: 1 or 2 //使用哪一条X轴，如果某条数轴没有被任何一条曲线使用，该数轴不会在图表上出现 yaxis: 1 or 2 //使用哪一条Y轴 clickable: boolean //允许监听鼠标点击事件 hoverable: boolean //允许监听鼠标悬停事件 shadowSize: number //曲线阴影 }一般情况下你无须设置每一个参数， 你只需要设置其中几个特定的参数即可，其他参数会使用默认值。例如： { label: y = 3, data: [[0, 3], [10, 3]] }label用于指定曲线名称，如果没有设置label的值，图表标题区域不会出现。如果没有设置曲线颜色，程序会自动采用默认颜色(options项里的colors数列)。颜色值可以是CSS颜色格式(RGB格式、16进制颜色、WEB通用颜色名)，还可以是数字编号，数字编号表示颜色数列里面颜色的编号。如果你允许用户重置或删除曲线，后者会比较有用，你可以在代码里面设置曲线使用的默认颜色的序号防止相同颜色在不用曲线间重复出现。xaxis 和 yaxis 设置曲线使用的数轴(第二条X轴是顶部横轴，第二条Y轴是右边的纵轴)，你可以使用这个属性制作双数轴曲线clickable 和 hoverable用于关闭该曲线的鼠标点击效果或鼠标悬停效果，具体说明看后面。(options中的clickable 或 hoverable设置为true时可以在某条曲线的data里设置clickable 或 hoverable为false，但options中设置为false时，不能在这里设置为true)其他参数在后面介绍，他们与plot函数的options参数的设置项是一样的，如果你为某条曲线在data里面设置了这些参数的值，他们会覆盖掉options的默认值。下面是一个简单例子，设置了2条曲线的参数： [ { label: Foo, data: [ [10, 1], [17, -14], [30, 5] ] }, { label: Bar, data: [ [11, 13], [19, 11], [30, -7] ] } ]plot的options参数options的所有选