强大的可视化库——Vis.js
:exclamation: 注意:本项目已不再维护!我们建议您转向 Visjs 社区的开源库。
Vis.js 是一个功能强大的浏览器端数据可视化工坊,专门设计用于处理大量动态数据,并支持数据交互操作。这个库由以下组件组成:
- DataSet 和 DataView:灵活的数据集,支持添加、更新和删除条目,可订阅数据集变化,过滤、排序以及转换项字段。
- DataView:数据集的过滤和/或格式化视图。
- Graph2d:在时间线上绘制线条或柱状图。
- Graph3d:呈现三维图表中的数据。
- Network:展示网络(力导向图)中的节点和边。
- Timeline:在时间线中显示各种类型的数据。
Vis.js 最初由 Almende B.V 开发,现在已成为开发者社区的重要资源。
安装
你可以通过 npm
或 bower
来安装 Vis.js,或者直接从 GitHub 下载源代码。
使用 npm
npm install vis
使用 bower
bower install vis
链接 CDN
你也可以通过 CDNS 如 cdnjs 直接链接到库文件。
加载库
只需在你的 HTML 文件中引入 JavaScript 和 CSS 文件,就可以使用 Vis.js 的组件:
<!DOCTYPE HTML>
<html>
<head>
<script src="vis/dist/vis.min.js"></script>
<link href="vis/dist/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
// ... 创建可视化
</script>
</body>
</html>
或者使用 require.js
进行异步加载,别忘了引入 vis.css
:
require.config({
paths: {
vis: 'path/to/vis/dist',
}
});
require(['vis'], function (vis) {
// ... 创建可视化
});
创建一个时间轴实例相当简单:
var timeline = new vis.Timeline(container, data, options);
其中 container
是 HTML 元素,data
可以是一个数据数组或一个 DataSet,而 options
是一个配置选项对象。
示例
下面是一个基本的时间轴示例。更多示例可以在项目的 examples 目录 找到。
<!DOCTYPE HTML>
<html>
<head>
<title>时间轴基础演示</title>
<script src="vis/dist/vis.min.js"></script>
<link href="vis/dist/vis.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var data = [
{/* 数据项 */}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>
构建与定制
从 Github 上克隆项目源码来构建 Vis.js:
git clone git://github.com/almende/vis.git
然后运行 npm install
安装所有依赖,随后执行 npm run build
或 npm run watch
(开发模式下)进行编译。
自定义构建
通过工具如 Browserify 或 Webpack,可以创建仅包含所需组件的自定义 Vis.js 版本。例如,如果只需要时间轴和数据集,创建名为 custom.js 的文件:
exports.DataSet = require('./lib/DataSet');
exports.Timeline = require('./lib/timeline/Timeline');
接着使用 Browserify 编译,例如:
browserify custom.js -t [ babelify --presets [es2015] ] -o dist/vis-custom.js -s vis
这会产生一个名为 vis-custom.js
的自定义打包文件,并以 vis
为命名空间暴露 DataSet
和 Timeline
。利用 uglify-js
对其进行压缩:
uglifyjs dist/vis-custom.js -o dist/vis-custom.min.js
最后,在网页中引入自定义打包的库文件和样式表即可。
测试
要测试库,首先确保已安装项目依赖,然后运行测试:
npm install
npm run test
许可
Vis.js 库遵循 Apache 2.0 和 MIT 双许可。它可以在任一许可下分发。
Vis.js 提供了丰富的数据可视化选项,无论你是需要描绘复杂的网络图,还是希望在时间线上展示信息,都有可能成为你的理想选择。其简洁的 API 设计使得集成到现有项目中变得轻松易行,而定制构建则允许你根据需求精简代码,提高性能。立即尝试 Vis.js,让数据动起来!