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

日期：2012/02/26 

在线演示  本地下载

今天介绍一个款不错的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);

via ：gbin1

希望大家喜欢！