上一篇文章对Flotr2进行了简单的介绍,现在我们通过一个简单的例子来介绍Flotr2的使用.

Flotr2的使用比较简单,总的来说,只需要三步:

  • 首先引入 Flotr2 类库:<script type="text/javascript" src="flotr2.min.js"> </script>
  • 添加用于呈现图表的 DIV 层<div id="container"> </div>
  • 绘制图表:Flotr.draw(container, data, options) 下面是展示北京、深圳2012年平均温度情况的图表:

<!DOCTYPE html>
 <html>
   <head>
     <style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        width : 800px;
        height: 400px;
        margin: 8px auto;
      }
     </style>
   </head>
   <body>
     <div id="container">  </div>
     <script type="text/javascript" src="flotr2.min.js">  </script>
     <script type="text/javascript">
    function drawChart(data){
      var container = document.getElementById("container");

      var option = {
             colors: ['#00A8F0', '#C0D800', '#CB4B4B', '#4DA74D', '#9440ED'],  //线条的颜色
             ieBackgroundColor:'#3ec5ff',                    //选中时的背景颜色
             title:'北京 深圳2012年平均温度情况',               //标题
             subtitle:'我是副标题',                           //子标题
             shadowSize:5,                                 //线条阴影
             defaultType:'lines',                           //图表类型,可选值:bars,bubbles,candles,gantt,lines,markers,pie,points,radar
             HtmlText:false,                                //是使用html或者canvas显示 true:使用html  false:使用canvas
             fontColor:'#ff3ec5',                           //字体颜色
             fontSize:7.5,                                  //字体大小
             resolution:1,                                  //分辨率 数字越大越模糊
             parseFloat:true,                               //是否将数据转化为浮点型
           xaxis: {
            ticks:[[1,"一月"],[2,"二月"],[3,"三月"],[4,"四月"],[5,"五月"],[6,"六月"],[7,"七月"],[8,"八月"],[9,"九月"],[10,"十月"],[11,"十一月"],[12,"十二月"]], // 自定义X轴
               minorTicks: null,
               showLabels:true,                             // 是否显示X轴刻度
               showMinorLabels:false,
               labelsAngle:15,                              //x轴文字倾斜角度
               title:'月份',                                 //x轴标题
               titleAngle:0,                                //x轴标题倾斜角度
               noTicks:12,                                   //当使用自动增长时,x轴刻度的个数
               minorTickFreq:null,                           //
               tickFormatter: Flotr.defaultTickFormatter,   //刻度的格式化方式
               tickDecimals:0,                              //刻度小数点后的位数
               min:null,                                    //刻度最小值  X轴起点的值
               max:null,                                    //刻度最大值
               autoscale:true,
               autoscaleMargin:0,
               color:null,                             //x轴刻度的颜色
               mode:'normal',
               timeFormat:null,                            
               timeMode:'UTC',                               //For UTC time ('local' for local time).
               timeUnit:'year',                             //时间单位 (millisecond, second, minute, hour, day, month, year)
               scaling:'linear',                            //linear or logarithmic
               base:Math.E,
               titleAlign:'center',                         //标题对齐方式
               margin:true
           },
           x2axis:{
           },
           yaxis:{
                  //// =>  Y轴配置与X轴类似
                ticks: [ [-10,"-10"], [0,"0"], [10,"10"], [20,"20"], [30,"30"],[40,"40"] ],  
                minorTicks: null,      // =>  format: either [1, 3] or [[1, 'a'], 3]
                showLabels: true,      // =>  setting to true will show the axis ticks labels, hide otherwise
                showMinorLabels: false,// =>  true to show the axis minor ticks labels, false to hide
                labelsAngle: 0,        // =>  labels' angle, in degrees
                title: '温度',           // =>  axis title
                titleAngle: 90,        // =>  axis title's angle, in degrees
                noTicks: null,            // =>  number of ticks for automagically generated ticks
                minorTickFreq: null,   // =>  number of minor ticks between major ticks for autogenerated ticks
                tickFormatter: Flotr.defaultTickFormatter, // =>  fn: number, Object ->  string
                tickDecimals: 'no',    // =>  no. of decimals, null means auto
                min: -10,             // =>  min. value to show, null means set automatically
                max: 40,             // =>  max. value to show, null means set automatically
                autoscale: false,      // =>  Turns autoscaling on with true
                autoscaleMargin: 0,    // =>  margin in % to add if auto-setting min/max
                color: null,           // =>  The color of the ticks
                scaling: 'linear',     // =>  Scaling, can be 'linear' or 'logarithmic'
                base: Math.E,
                titleAlign: 'center',
                margin: true           // =>  Turn off margins with false
           },
           y2axis:{

           },
           grid: {
                  color: '#545454',      // =>  表格外边框和标题以及所有刻度的颜色
                  backgroundColor: null, // =>  表格背景颜色
                  backgroundImage: null, // =>  表格背景图片
                  watermarkAlpha: 0.4,   // =>  水印透明度
                  tickColor: '#DDDDDD',  // =>  表格内部线条的颜色
                  labelMargin: 1,        // =>  margin in pixels
                  verticalLines: true,   // =>  表格内部是否显示垂直线条
                  minorVerticalLines: null, // =>  whether to show gridlines for minor ticks in vertical dir.
                  horizontalLines: true, // =>  表格内部是否显示水平线条
                  minorHorizontalLines: null, // =>  whether to show gridlines for minor ticks in horizontal dir.
                  outlineWidth: 1,       // =>  表格外边框的粗细
                  outline : 'nsew',      // =>  超出显示范围后的显示方式
                  circular: false        // =>  是否以环形的方式显示
           },
           mouse:{
                  track: true,          // =>  为true时,当鼠标移动到每个折点时,会显示折点的坐标
                  trackAll: true,       // =>  为true时,当鼠标在线条上移动时,显示所在点的坐标
                  position: 'se',        // =>  鼠标事件显示数据的位置 (default south-east)
                  relative: false,       // =>  当为true时,鼠标移动时,即使不在线条上,也会显示相应点的数据
                  trackFormatter: Flotr.defaultTrackFormatter, // =>  formats the values in the value box
                  margin: 5,             // =>  margin in pixels of the valuebox
                  lineColor: '#FF3F19',  // =>  鼠标移动到线条上时,点的颜色
                  trackDecimals: 0,      // =>  数值小数点后的位数
                  sensibility: 2,        // =>  值越小,鼠标事件越精确
                  trackY: true,          // =>  whether or not to track the mouse in the y axis
                  radius: 3,             // =>  radius of the track point
                  fillColor: null,       // =>  color to fill our select bar with only applies to bar and similar graphs (only bars for now)
                  fillOpacity: 0.4       // =>  o
           }
        };

      // Draw Graph
      Flotr.draw(container, data, option);
    }  
     </script>

     <script type="text/javascript">
 var
    bj = [[1, -9], [2, 1], [3, 12], [4, 20],[5, 26], [6, 30], [7, 32], [8, 29],[9, 22], [10, 12], [11, 0], [12, -6]],// First data series
    sz = [[1, 15], [2, 16], [3, 19], [4, 22],[5, 26], [6, 27], [7, 28], [8, 28],[9, 27], [10, 25], [11, 20], [12, 16]]; //Second data series

 var data = [
    { data : bj, label :'北京' ,lines : { show : true }, points : { show : true }},
    { data : sz, label :'深圳' ,lines : { show : true }, points : { show : true }}
  ];
  drawChart(data);

     </script>

   </body>
 </html>

Flotr2_1
Flotr2_1

Flotr2_2
Flotr2_2

完整代码下载: Flotr2Demo