分享一個快速開發動態互動HTML5可視化圖形效果的Javascript類庫 - Envision.js
日期：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
希望大家喜歡這個類庫！
歡迎訪問GBin1.com
浙公網安備 33010602011771號