JavaScript数据可视化编程之Flotr2

johnny233

于 2021-02-18 20:11:51 发布

阅读量352

点赞数

分类专栏：读书笔记 JS

本文链接：https://blog.csdn.net/lonelymanontheway/article/details/113851471

版权

读书笔记同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

概述

Flotr是一个基于Prototype开发的JS绘图工具。支持图例，鼠标跟踪，图片区域选择，图片缩放，添加事件钩子（event hook），通过CSS设置样式等。

GitHub，久未更新，最后一次7年前。

官网，文档和示例

Flotr2，一个用于绘制H5图形图表（charts and graphs）的开源 JS 库，flotr 的分支，有独立版和插件版。独立版对旧版本做了不少改进，移除对Prototype的依赖还改进移动设备的支持，如支持Touch事件。数据系列也有了改进，构成系列的每个数组可以支持多个元素，旧版的只支持两个(对应x和y)。插件版可灵活选择并自由扩展插件。

特性：

支持移动设备
框架独立，不依赖于其他框架如jQuery
可扩展的插件框架
定制图表类型
支持浏览器：FF、Chrome、IE 9+、Android、iOS
支持类型：lines、bars、candles、pies、bubbles等

基础

min、max属性设置横、纵轴的最小值、最大值
ticketDecimals属性指定标注展示的小数精度
默认，每个柱体是平均分配到整个横轴的长度，显得拥挤。通过barWidth属性进行调整
grid.horizontalLines、grid.verticalLines属性的true/false控制是否展示网格线
y2axis，即第二个纵坐标
tickFormatter属性会遍历对应轴上的每一个标记值，并对其进行格式化处理
title和subtile选项表示标题和次级标题
legend: {position: "ne"}将图例定位在图表的右上角

示例

<html>
  <head>
    <style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        width : 600px;
        height: 384px;
        margin: 8px auto;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <!--[if IE]>
    <script type="text/javascript" src="http://www.humblesoftware.com/static/lib/FlashCanvas/bin/flashcanvas.js"></script>
    <![endif]-->
    <!-- <script type="text/javascript" src="http://www.humblesoftware.com/static/js/flotr2.min.js"></script> -->
    <script type="text/javascript" src="http://www.script-tutorials.com/demos/235/js/flotr2.min.js"></script>
    <script type="text/javascript">
      (function () {
        var
          container = document.getElementById('container'),
          start = (new Date).getTime(),
          data, graph, offset, i;
        // 在时间t绘制一条正弦曲线
        function animate (t) {
          data = [];
          offset = 2 * Math.PI * (t - start) / 10000;
          // 采样正弦函数
          for (i = 0; i < 4 * Math.PI; i += 0.2) {
            data.push([i, Math.sin(i - offset)]);
          }
          // 绘制图表
          graph = Flotr.draw(container, [ data ], {
            yaxis : {
              max : 2,
              min : -2
            }
          });
          // 动画
          setTimeout(function () {
            animate((new Date).getTime());
          }, 50);
        }
        animate(start);
      })();
    </script>
  </body>
</html>