web的demo制造_Flotr2 开源的HTML5图表制作组件介绍

Flotr2是HTML5绘制图表和图形库

特性

移动支持

独立框架

可扩展的插件框架

自定义图表类型

支持FF, Chrome, IE6+, Android, iOS

用法

要使用Flotr2，在你的页面中包含flotr2.min.js，并创建一个可见的div正宽度和高度。

DEMO

body {

margin: 0px;

padding: 0px;

}

#container {

width : 600px;

height: 384px;

margin: 8px auto;

}

(function () {

var

container = document.getElementById('container'),

start = (new Date).getTime(),

data, graph, offset, i;

// 在时间t绘制一条正弦曲线

function animate (t) {

data = [];

offset = 2 * Math.PI * (t - start) / 10000;

// 采样正弦函数

for (i = 0; i < 4 * Math.PI; i += 0.2) {

data.push([i, Math.sin(i - offset)]);

}

// 绘制图表

graph = Flotr.draw(container, [ data ], {

yaxis : {

max : 2,

min : -2

}

});

// 动画

setTimeout(function () {

animate((new Date).getTime());

}, 50);

}

animate(start);

})();