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. 配置tomcat启动参数-Dfile.encoding=UTF-8后,IDEA控制台乱码

    配置tomcat启动参数-Dfile.encoding=UTF-8后,IDEA控制台出现乱码 解决方法: 在idea的bin目录(如:D:\JetBrains\IntelliJ IDEA 2018.1 ...

  2. Jenkins构建完成后通过SVN Publisher Plugin上传文件到指定的SVN（教程收集）

    SVN Publisher Plugin:https://wiki.jenkins-ci.org/display/JENKINS/SVN+Publisher 构建完成后的文件,比如Maven打的war ...

  3. sql server trace

    http://www.cnblogs.com/zhijianliutang/p/4113911.html http://www.cnblogs.com/studyzy/archive/2009/01/ ...

  4. 定时任务crontab如何实现每秒执行？

    linux crontab 命令,最小的执行时间是一分钟.如需要在小于一分钟内重复执行,可以有两个方法实现. 方法一:crontab -l内容如下,则每10秒执行一次/home/fdipzone/ph ...

  5. sh_Spring整合Hibernate

    分别介绍了Sping和Hibernate,以下是将它们整合到一块去了.   一.Hibernate内容 1.创建PO类. package cn.tgb.domain; //User实体 public ...

  6. java.lang.String中的trim()方法的详细说明（转）

    String.Trim()方法到底为我们做了什么,仅仅是去除字符串两端的空格吗? 一直以为Trim()方法就是把字符串两端的空格字符给删去,其实我错了,而且错的比较离谱. 首先我直接反编译String ...

  7. C#数据类型与数据库字段类型对应

    数据库 C#程序 int int32 text string bigint int64 binary System.Byte[] bit Boolean char string datetime Sy ...

  8. javascript 高级编程系列 - 函数

    一.函数创建 1. 函数声明 (出现在全局作用域,或局部作用域) function add (a, b) { return a + b; } function add(a, b) { return a ...

  9. HDU 4923 Room and Moor(推理+栈维护)

    HDU 4924 Room and Moor 题目链接 题意:给定一个01组成的a序列.要求一个b序列,b序列每一个数值为[0, 1]之间的数,而且b序列为非递减序列,要求∑(ai−bi)2最小,求这 ...

  10. POI-----POI操作Excel-4、字体