首页风格
门户
博客

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

日期:2012/02/26  来源:GBin1.com

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

CSS

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

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

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com


  1. 梦魇

    很不错哦,学习了!
    2013-5-8 下午4:32

  2. 梦魇

    很不错哦,学习了!
    2013-5-8 下午4:31
今日推荐