注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

itoedr的it学苑

记录从IT文盲学到专家的历程

 
 
 

日志

 
 

html5图形库:Flotr2.js使用一例  

2013-12-02 16:10:42|  分类: html5-webapp |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

       一位作者说:使用了Flotr2。只花费数分钟,就能通过操作 javascript 将数据转化成 Flotr2 能理解的函数,然后 Flotr2 就将数据转化成漂亮的图表。

          Flotr2 最大的优点是他没有过度设计,当你只想要一个简单图表时候,它不会让你去操作过多东西。

         使用中,往往只需要你设定必要的数据和一两个标签,比如:

   function draw_time(container, data, title) {
  var
  start = new Date(DATA[0].date).getTime(),
  options,
  graph,
  i, x, o;

  options = {
      xaxis : {
          mode : 'time',
          labelsAngle : 45
      },
      selection : {
          mode : 'x'
      },
      legend: {
          position: 'se'
      },
      HtmlText : false,
      title : title
  };

  // Draw graph with default options, overwriting with passed options
  function drawGraph (opts) {

      // Clone the options, so the 'options' variable always keeps intact.
      o = Flotr._.extend(Flotr._.clone(options), opts || {});

      // Return a new graph.
      return Flotr.draw(
          container,
          data,
          options
      );
  }

  graph = drawGraph();

  Flotr.EventAdapter.observe(container, 'flotr:select', function(area){
      // Draw selected area
      graph = drawGraph({
          xaxis : { min : area.x1, max : area.x2, mode : 'time', labelsAngle : 45 },
          yaxis : { min : area.y1, max : area.y2 }
      });
  });

  // When graph is clicked, draw the graph with default area.
  Flotr.EventAdapter.observe(container, 'flotr:click', function () { graph = drawGraph();});
}
  评论这张
 
阅读(87)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017