您的位置：首页 > Web前端 > JavaScript

分享一个快速开发动态互动HTML5可视化图形效果的Javascript类库 - Envision.js

2012-04-10 15:58 1001 查看

日期：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

希望大家喜欢这个类库！

来源：分享一个快速开发动态互动HTML5可视化图形效果的Javascript类库 - Envision.js

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航