1. [图片] 未命名.jpg


​2. [代码][HTML]代码

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>用 Flotr2 实现的 HTML5 图表</title>
        <script src="http://www.script-tutorials.com/demos/235/js/flotr2.min.js"></script>
        <!--[if lt IE 9]>
        <script type="text/javascript" src="js/flashcanvas.js"></script>
        <![endif]-->
      <style>
      /* page layout styles */
      *{
          margin:0;
          padding:0;
      }
 
      header a.stuts,a.stuts:visited{
          border:none;
          text-decoration:none;
          color:#fcfcfc;
          font-size:14px;
          left:50%;
          line-height:31px;
          margin:23px 0 0 110px;
          position:absolute;
          top:0;
      }
      header .stuts span {
          font-size:22px;
          font-weight:bold;
          margin-left:5px;
      }
      .container {
          color: #000;
          margin: 20px auto;
          overflow: hidden;
          position: relative;
          width: 600px;
          height: 400px;
      }
      .controls {
          border: 1px dashed gray;
          color: #000;
          margin: 20px auto;
          padding: 25px;
          position: relative;
          width: 550px;
      }
      .controls p {
          margin-bottom: 10px;
      }
      .controls input {
          margin-left: 10px;
      }
 
      </style>
    </head>
    <body>
             
      <div ><h2>使用<a href="http://www.oschina.net/p/flotr2" target="_blank">Flotr2</a>实现的HTML5图表效果</h2>源码地址：http://www.script-tutorials.com/html5-charts-and-graphs/</div>
        <div id="container" class="container"></div>
        <div class="controls">
            <h3>函数:</h3>
            <p>
              <input type="radio" id="funcsin" name="func" value="1" onclick="toggleFunc(1)" checked><label for="funcsin"> sin</label>
              <input type="radio" name="func" id="funcsin2" value="2" onclick="toggleFunc(2)"><label for="funcsin2"> sin(1/x)</lalel>
            </p>
            <h3>视觉模式:</h3>
            <p>
              <input type="radio" name="mode" value="1" id="vm1" onclick="toggleMode(1)" checked> <label for="vm1">#1</label>
                <input type="radio" name="mode" value="2" id="vm2" onclick="toggleMode(2)"> <label for="vm2">#2</label>
                <input type="radio" name="mode" value="3" id="vm3" onclick="toggleMode(3)"> <label for="vm3">#3</label>
            </p>
        </div>
    </body>
</html>
3. [代码][JavaScript]代码     
var container = document.getElementById('container');
var start = (new Date).getTime();
var data, graph, offset, i;
 
var mode = 1;
var fmode = 1; // 1- basic sin, 2 - sin(1/x)
 
// toggle mode
function toggleMode(i) {
    mode = i;
}
// toggle func
function toggleFunc(i) {
    fmode = i;
}
 
// Draw a sine curve at time t
function animateSine (t) {
    data = [];
    data2 = [];
 
    // little offset between steps
    offset = 2 * Math.PI * (t - start) / 10000;
    http://www.enterdesk.com/special/meitu/​
    if (fmode == 2 && offset > 15) {
        start = t;美图
    }
 
    for (i = 0; i < 4 * Math.PI; i += 0.2) {
        if (fmode == 1) {
            data.push([i, Math.sin(i - offset)]);
            data2.push([i, Math.sin(i*2 - offset)]);
        } else if (fmode == 2) {
            data.push([i, Math.sin(1/(i-offset))]);
            // data2.push([i, Math.sin(1/(i*2-offset))]);
        }
    }
 
    // prepare properties
    var properties;
    switch (mode) {
        case 1:
            properties = {
                yaxis : {
                    max : 2,
                    min : -2
                }
            };
            break;
        case 2:
            properties = {
                yaxis : {
                    max : 2,
                    min : -2
                },
                bars: {
                    show: true,
                    horizontal: false,
                    shadowSize: 0,
                    barWidth: 0.5
                }
            };
            break;
        case 3:
            properties = {
                yaxis : {
                    max : 2,
                    min : -2
                },
                radar: {
                    show: true
                },
                grid: {
                    circular: true,
                    minorHorizontalLines: true
                }
            };
            break;
        case 4:
            properties = {
                yaxis : {
                    max : 2,
                    min : -2
                },
                bubbles: {
                    show: true,
                    baseRadius: 5
                },
            };
            break;
    }
 
    // draw graph
    if (fmode == 1) {
        graph = Flotr.draw(container, [ data, data2 ], properties);
    } else if (fmode == 2) {
        graph = Flotr.draw(container, [ data ], properties);
    }
 
    // main loop
    setTimeout(function () {
        animateSine((new Date).getTime());
    }, 50);
}
 
animateSine(start);

用 Flotr2 实现的 HTML5 图表的更多相关文章

  1. html5图表

    http://www.html5tricks.com/tag/html5图表

  2. HTML5优秀图表控件

    不管是哪个领域的开发,都有机会用到图表来做统计分析,以更直观的表现形式来代替传统的文字.在以前,图表控件主要有使用程序代码生成的静态图片,或者是使用flash实现的图表控件. 在HTML5非常流行的当 ...

  3. 9款基于HTML5/SVG/Canvas的折线图表应用

    1.华丽的HTML5图表 可展示实时数据 HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大.这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势 ...

  4. 基于HTML5 Canvas的饼状图表实现教程

    昨天我们分享了一款基于HTML5的线性图表应用,效果非常不错,可以看在线DEMO或者实现教程.今天我们继续来分享一款基于HTML5的网页图表,它也是利用Canvas绘制的,但是和前面不同的是,这款图表 ...

  5. 基于HTML5 Canvas的线性区域图表教程

    之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...

  6. HTML5线性图表 图表数据区域可着色

    这是一款基于Canvas的HTML5图表应用,在图表数据初始化的时候伴随动画效果. 在线演示: 点击演示 源代码下载: 点击下载 核心jQuery代码: var myData = {   labels ...

  7. HTML5/jQuery雷达动画图表 图表配置十分简单

    1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...

  8. 13个JavaScript图表（JS图表）图形绘制插件【转】

    现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...

  9. 13个JavaScript图表（JS图表）图形绘制插件

    转自:http://blog.jobbole.com/13671/ 1. Flash 过去是最佳解决方案,但很多人多在从那迁移: 2. 现代浏览器及其更强大的计算能力,使其在转化绘制实时数据方面的能力 ...

随机推荐

  1. java常用组件

    一.Jpanel 1.面板:容器类组件 2.用途:与Layout配合使用,JFrame—>JPanel—>Layout 二.JTextField 1.文本框 2.JPasswordFiel ...

  2. RabbitMQ 核心概念

    目录 RabbitMQ 特点 AMQP 协议 RabbitMQ 消息传递机制 Message Exchange 1. 简介 2. 类型 3. 属性 RabbitMQ 特点 RabbitMQ 相较于其他 ...

  3. 弹出层layer演示 以及在编写弹出层时遇到的错误

    实现的功能: 首先第一步 在官方下载layer的文件.layUI官网:http://layer.layui.com/     http://layer.layui.com/ layer文件的下载步骤如 ...

  4. scrapy 启动失败，scrapy startproject test 出错 'module' object has no attribute 'OP_NO_TLSv1_1

    你先看看 pip install scrapy需要的 pyopenssl  twisted  等和你安装的版本一样么  我的就是因为TWist 版本高于  需要的 用pip install twist ...

  5. Cocos2d-X中Menu的综合运用

    今天将曾经写的代码和项目集成到了一个菜单中,能够通过菜单切换到曾经做的项目 程序的project文件夹 主要代码分析: LessonMenu.h中实现创建菜单,遍历菜单通过菜单切换到各个项目 #ifn ...

  6. 这一篇里面有很多关于scala的list的操作的好的知识

    https://www.cnblogs.com/weilunhui/p/5658860.html 1.++[B]   在A元素后面追加B元素 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  7. python得到最长递增子串长度及起始位置【转】

    def incSeq(seq): start = 0 for i in xrange(1, len(seq)): if seq[i] < seq[i-1]: yield start, i - s ...

  8. 重新认识一遍JavaScript - 2

    1.JavaScript没有Java和C中的int.double,怎么识别这些类型的呢?或者说不支持 问:你认为呢? 答:var 支持所有数据类型(int.double.string),取决于你输入的 ...

  9. Codeforces Round #313 (Div. 2) ABC

    A http://codeforces.com/contest/560/problem/A 推断给出的数能否组成全部自然数. 水题 int a[1010]; bool b[1000010]; int ...

  10. ubuntu boot空间不足

    在安装 Ubuntu的时候 , 给/boot文件目录分配空间的时候,是100M,/boot可以单独分成一个区,也可以不单独分,在/(根目录)下也会自动为其创建一个boot目录.顺便提一下,Linux分 ...