用 Flotr2 实现的 HTML5 图表

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);

时间: 2024-11-08 23:45:57

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

jquery html5图表动画圆形饼图特效

上图: html和jquery实现的饼图特效,效果特好 使用方法: 引入脚本和css <link href="css/style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script src="

html5图表

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

Chart.js | HTML5 图表绘制工具库(知识整理、中文注释、中文文档)

Chart.js:用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上.基于HTML5 canvas技术,Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k).值得推荐学习! GitHub源码: https://github.com/nnnick/Chart.js Chart.js文档:http://www.bootcss.com/p/chart.js/ 步骤: html部分: <canvas id="myChart&q

HTML5图表组件一点感想

虽然注册园子很早了,但是一直没写过什么文章,都是看各位大神的文章,自己也总结过,但是都没有成章,从现在开始督促自己做一些总结,逐步提升自己.就先从最近的项目开始吧. 最近的项目是在移动端进行图表开发,针对目前流行的图表框架做了些研究,主要有echarts.highcharts.ichart.chartjs及canvasjs. echarts底层基于ZRender(canvas类库),支持各种复杂的图表,交互能力很强,兼容绝大多数浏览器,基础包过大(449k),需指定图表宽高,虽然说是支持移动端,

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

1.华丽的HTML5图表 可展示实时数据 HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大.这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势,图表不仅支持多维数据展示,而且支持区域选择数据功能,利用该HTML5图表可以更加方便地管理你的数据. 在线演示 源码下载 2.HTML5折线图表Aristochart 图表配置简单 利用这些HTML5图表可以很方便的展示各种数据,而且非常直观.今天要向大家分享一款HTML5折线图表插件Aristo

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

之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的形式展现,各个数据之间形成的区域用不同的颜色表示,具体可以看下面的DEMO演示. 你也可以在这里查看在线演示 下面我们来简单介绍一下实现这款HTML5图表的过程以及源代码. HTML代码: <canvas id="cvs" width="600" height=&

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

昨天我们分享了一款基于HTML5的线性图表应用,效果非常不错,可以看在线DEMO或者实现教程.今天我们继续来分享一款基于HTML5的网页图表,它也是利用Canvas绘制的,但是和前面不同的是,这款图表是饼状图,并且我们可以点击右侧的表格来选中激活当前的图表数据,具体效果可以看DEMO演示. 你也可以在这里查看在线演示 下面是实现的过程及源码,一起分享给大家. HTML代码: <div id="container"> <canvas id="chart&quo

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

这是一款基于Canvas的HTML5图表应用,在图表数据初始化的时候伴随动画效果. 在线演示: 点击演示 源代码下载: 点击下载 核心jQuery代码: var myData = { labels : ["Mo","Di","Mi","Do","Fr","Sa","So"], datasets : [ { fillColor : "rgba(220,220,

13个JavaScript图表(JS图表)图形绘制插件【转】

现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容易就可以找到很多功能非常不错的图表库.个人而言,此类插件的上升,是因为: 1. Flash 过去是最佳解决方案,但很多人多在从那迁移: 2. 现代浏览器及其更强大的计算能力,使其在转化绘制实时数据方面的能力更佳: 3. 绘制矢量图的不同技术愈发成熟:VML.SVG 和 Canvas. 当然了,你需要