Flot js and plugins

flot 基本文件只有线框图，其他都是按需引入。

<script src="/labs/jquery.flot.min.js"></script><!--必须-->
<script src="/labs/jquery.flot.resize.js"></script><!--如果需要根据浏览器宽度自动缩放的话-->
<script src="/labs/jquery.flot.pie.js"></script><!--pie 是另外的，不在 flot.js 中-->
<script src="/labs/jquery.flot.categories.js"></script><!--x坐标是文字而不是数字的话-->
<script src="/labs/jquery.flot.tooltip.min.js"></script><!--显示提示信息-->

<!--[if lt IE 9]>
<script src="/labs/excanvas.min.js"></script>
<![endif]--><!--为了支持 ie 6-7-8-->

柱图

颜色可以在 data 中，也可以在 option 中

var data1=[
    {label:'数据1',data:arr1,color:'#06c'},
    {label:'数据2',data:arr2,color:'#c60'}
]

或者

var option1={
    series:{
        bars:{show:true,barWidth:0.6,order:1,align:'left'}    
    },
    grid:{borderWidth:0}
    colors:['red','green']
}

前者（数据中带颜色，优先！）

折线图

柱图和折线图 其本质是一样的。唯一的区别在于 option line:{show:true}

no steps steps

var option2={
    series:{
        lines:{show:true}        
    },
    grid:{borderWidth:0},
    colors:['#06c','#c60']
}

饼图

饼图，还需要 jquery.flot.pie.js，完整代码

var data3=[
    {label:'数据1',data:20},
    {label:'数据2',data:80},
    {label:'数据3',data:70},
    {label:'数据4',data:10},
    {label:'数据5',data:34}
]

var option3={
    series:{
        pie:{show:true}        
    },
    grid:{borderWidth:0},
    colors:['#c60','#6c0','#06c','#cc0','#0cc']
}

var flot_pie=$.plot('#flot-pie',data3,option3);

X轴文字以及tooltips

tooltips 有点bug，x y 必须数字，：（

stack 另外需要插件

no stack stack