JQuery图表插件Flot之属性方法

更多详情：http://www.cnblogs.com/jirimutu01/archive/2011/07/13/2105150.html

中文详解：http://www.cnblogs.com/qiudan/archive/2012/06/13/2547719.html

Examples：http://people.iola.dk/olau/flot/examples/

$(function () {
var d1 = [[new Date(2016,6,2),90],[new Date(2016,7,2),100],[new Date(2016,8,2),110],
[new Date(2016,9,2),90],[new Date(2016,10,2),100],[new Date(2016,12,2),160]];
var d2 = [[new Date(2016,6,2),110],[new Date(2016,7,2),120],[new Date(2016,8,2),160],
[new Date(2016,9,2),130],[new Date(2016,10,2),130],[new Date(2016,12,2),140]];
$.plot("#placeholder", [
{ label: "甲", data: d1 },   //label是说明一个数据序列含义的，如果多个序列用于区分序列
{ label: "乙", data: d2 }     //如果不设置color，那么会自动生成color来进行显示

], {series: {
lines: { show: true },
points: { show: true }
xaxis: 1 or 2                 //使用哪一条X轴，如果某条数轴没有被任何一条曲线使用，该数轴不会在图表上出现
yaxis: 1 or 2                 //使用哪一条Y轴
clickable: boolean            //允许监听鼠标点击事件
hoverable: boolean            //允许监听鼠标悬停事件
shadowSize: number            //曲线阴影
},xaxis: {                        //设置x轴坐标参数
mode: "time",                 //数轴是否为时间模式null，time为时间模式 timeformat: "%y/%m/%d"
autoscaleMargin: null or number//按百分比为数轴延长一小段来缩放曲线以避免曲线最远的数据点出现在图表边框上
"transform"，"inverseTransform"：可以对原始的数据进行一些特殊的计算以后再进行绘制
%y/%m/%d 小写y是15 大写Y则显示的是2015 表示fullyear
},yaxis: {
ticks:10,                      //步长 设置y轴坐标参数程序,尽量会设置最合适的刻度个数，因此，尽管你设置了3个刻度数，却可能得到6个，
//如果你不需要自己设置刻度，把"ticks"的值设置为0或一个空数组
min: 80,                       //数轴最小值 如果没有明确指定将使用数据中的最大最小值
max: 200,                      //数轴最大值
   tickFormatter:function
autoscaleMargin:10             //这个属性只能在不设置max/min的时候才可以使用
tickDecimals: 3                //用于设置刻度的小数位数，默认情况下程序会自动判断截取
tickSize                       //直接跳过估算步骤设置刻度间隔步长，如果你设置该值为2，生成的刻度将会是形如2，4，6
minTickSize                    //可以设置刻度间隔的最小值，
ticks: [0, 1.2, 2.4]           //自定义
labelWidth" 和 "labelHeight" 用于设置数轴刻度标签的高宽，这个属性在你需要排列整齐几个图表的时候会派上用场。
},grid: {
backgroundColor: { colors: [ "#fff", "#eee" ] },
hoverable: true, clickable: true,
borderWidth: {top: 1,right: 1,bottom: 2,left: 2}                //背景栅格定制
tickColor                      //设置刻度线的颜色
labelMargin                    //设置刻度值标签与网格的距离，
borderWidth                    //设置边框宽度，设为0则取消边框
borderColor                    //设置边框颜色
，}});
$("#placeholder").bind("plotclick", function (event, pos, item) {             //鼠标点击事件
if (item) {
$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
                        plot.highlight(item.series, item.datapoint);
}
});
});
pos有如下属性：
pos.pageX,pos.pageY：横纵坐标像素 从左上角（0,0）开始 x轴0-n（-->） y轴0-m（从上到下）
pos.x,pos.y,pos.x1,pos.y1:横纵坐标值
item有如下属性
item.datapoint:
item.dataIndex 该点数据在对应数列数组里的下标
item.series 曲线对象
item.seriesIndex 在多曲线体系中该曲线的下标，即第几条曲线，编号从0开始
item.pageX,item.pageY 改点屏幕坐标，单位是像素
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");
$("#placeholder").bind("plothover", function (event, pos, item) {  //鼠标移动事件
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + " : " + y)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
$("#placeholder").bind("plotclick", function (event, pos, item) { //鼠标点击事件
if (item) {
plot.highlight(item.series, item.datapoint);
}
});