中琅软件教程网

首页搜索登录
首页业界网页平面多媒体程序数据库办公工具服务器系统网络安全站长认证壁纸
加入收藏 | 网站地图 | | RSS | WAP
你好,游客 登录 注册 搜索

使用绘图类库flotr2来绘制HTML5的图形和图表

[日期:2012-02-27] 作者: 来源: [字体: ]

使用绘图类库flotr2来绘制HTML5的图形和图表

今天介绍一个款不错的HTML5绘图和制表类库-flotr2。 它可以有效地帮助你绘制基于HTML5图表图形,包括线图柱状图饼图气泡图等等,对于浏览器的兼容性也非常不错。

flotr2主要特性

  • 移动支持
  • 独立框架
  • 可扩展的插件框架
  • 自定义的图表类型
  • FF, Chrome, IE6+, Android, iOS
  • 线装图
  • 柱状图
  • 烛柱图
  • 饼图
  • 气泡图

HTML:

<div id="container" class="container"></div>
<div class="controls">
    <h3>Function:</h3>
    <p>
        <input type="radio" name="func" value="1" onclick="toggleFunc(1)" checked> sin
        <input type="radio" name="func" value="2" onclick="toggleFunc(2)"> sin(1/x)
    </p>
    <h3>Visual mode:</h3>
    <p>
        <input type="radio" name="mode" value="1" onclick="toggleMode(1)" checked> #1
        <input type="radio" name="mode" value="2" onclick="toggleMode(2)"> #2
        <input type="radio" name="mode" value="3" onclick="toggleMode(3)"> #3
    </p>
</div>

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;

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

关键词:图形  图表  绘图  绘制 

收藏 推荐 打印 | 录入:blue1000 | 阅读:
本文评论   查看全部评论 (1)
表情: 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事/刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 1 楼
* 匿名 发表于 2016/12/24 20:16:56
http://www.blue1000.com/bkhtml/c17/2013-06/71200.htm 小学德育工作计划(第一学期) http://www.135995.com/show/3808.html 2016年德育处工作计划 http://www.135995.com/show/3381.html