使用绘图类库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

希望大家喜欢！

本文链接