日期：2012-4-7 来源：GBin1.com
今天我们介绍一个超棒的创建快速动态互动HTML5可视化图形效果的javascript类库 - Envision.js，这个类库拥有俩个内建的图表类型：
- 时间序列图表
- 金融图形图表
主要特性
- 实时图形展示
- 时间序列，支持缩放，内建互动操作
- 金融类型图表，可定制
- 支持AJAX
- 自定义图形图表，例如，不规则碎片形
- 支持现代浏览器，IE6+
- 支持移动及其触摸设备
- 拥有自定图形API
- 兼容支持Flotr2
- 可兼容其他
- 基于Flotr2 和HTML5画布
如何使用
引入如下类库和CSS文件：
<script type="text/javascript" src="envision.min.js"></script>
<link rel="stylesheet" href="envision.min.css" type="text/css" />
一个简单的例子：
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#container {
width : 600px;
margin: 8px auto;
}
</style>
<link rel="stylesheet" type="text/css" href="/static/css/envision.min.css" />
</head>
<body>
<div id="container"></div>
<!--[if IE]>
<script type="text/javascript" src="/static/lib/FlashCanvas/bin/flashcanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="/static/js/envision.min.js"></script>
<script type="text/javascript">
(function () {
var
container = document.getElementById('container'),
x = [],
y1 = [],
y2 = [],
data, options, i;
// Data Format:
data = [
[x, y1], // First Series
[x, y2] // Second Series
];
// Sample the sine function for data
for (i = 0; i < 4 * Math.PI; i += 0.05) {
x.push(i);
y1.push(Math.sin(i));
y2.push(Math.sin(i + Math.PI));
}
x.push(4 * Math.PI)
y1.push(Math.sin(4 * Math.PI));
y2.push(Math.sin(4 * Math.PI));
// TimeSeries Template Options
options = {
// Container to render inside of
container : container,
// Data for detail (top chart) and summary (bottom chart)
data : {
detail : data,
summary : data
}
};
// Create the TimeSeries
new envision.templates.TimeSeries(options);
})();
</script>
</body>
</html>
API文档：http://www.humblesoftware.com/envision/documentation
希望大家喜欢这个类库！