JavaScript数据可视化编程之Flotr2
黎承颜
概述
Flotr是一个基于Prototype开发的JS绘图工具。支持图例，鼠标跟踪，图片区域选择，图片缩放，添加事件钩子（event hook），通过CSS设置样式等。
GitHub，久未更新，最后一次7年前。
官网，文档和示例
Flotr2，一个用于绘制H5图形图表（charts and graphs）的开源 JS 库，flotr 的分支，有独立版和插件版。独立版对旧版本做了不少改进，移除对Prototype的依赖还改进移动设备的支持，如支持Touch事件。数据系列也有了改进，构成系列的每个数组可以支持多个元素，旧版的只支持两个(对应x和y)。插件版可灵活选择并自由扩展插件。
特性：
- 支持移动设备
- 框架独立，不依赖于其他框架如jQuery
- 可扩展的插件框架
- 定制图表类型
- 支持浏览器：FF、Chrome、IE 9+、Android、iOS
- 支持类型：lines、bars、candles、pies、bubbles等
基础
- min、max属性设置横、纵轴的最小值、最大值
- ticketDecimals属性指定标注展示的小数精度
- 默认，每个柱体是平均分配到整个横轴的长度，显得拥挤。通过barWidth属性进行调整
grid.horizontalLines、grid.verticalLines属性的true/false控制是否展示网格线- y2axis，即第二个纵坐标
- tickFormatter属性会遍历对应轴上的每一个标记值，并对其进行格式化处理
- title和subtile选项表示标题和次级标题
legend: {position: "ne"}将图例定位在图表的右上角
示例
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#container {
width : 600px;
height: 384px;
margin: 8px auto;
}
</style>
</head>
<body>
<div id="container"></div>
<!--[if IE]>
<script type="text/javascript" src="http://www.humblesoftware.com/static/lib/FlashCanvas/bin/flashcanvas.js"></script>
<![endif]-->
<!-- <script type="text/javascript" src="http://www.humblesoftware.com/static/js/flotr2.min.js"></script> -->
<script type="text/javascript" src="http://www.script-tutorials.com/demos/235/js/flotr2.min.js"></script>
<script type="text/javascript">
(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);
})();
</script>
</body>
</html>
参考
Flotr2简介
用 Flotr2 实现的 HTML5 图表
其他：
Flotr2，包含简单的，柱状图，折线图，饼图，散点图
Flotr2，雷达图
类似资料：