【免费下载】强大的可视化库——Vis.js

最新推荐文章于 2025-04-12 10:52:19 发布

侯深业Dorian

最新推荐文章于 2025-04-12 10:52:19 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00093/article/details/138650547

强大的可视化库——Vis.js

去发现同类优质开源项目:https://gitcode.com/

: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，让数据动起来！

去发现同类优质开源项目:https://gitcode.com/

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考