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

Vis.js – 基于浏览器的动态 JavaScript 可视化库

2014-09-02 20:01 821 查看

Vis.js is a dynamic, browser based visualization library. The library is designed to be easy to use,
to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d, and Graph3d.

The vis.js library is developed by Almende B.V, as part of CHAP.
Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile browsers (with full touch support).

Install

npm

npm install vis

bower

bower install vis

download

Click here to download vis.js (version 3.3.0)

Example

A basic example demonstrating how to use the vis.js timeline is shown below. See thegallery below for more examples.

<!doctype html>
<html>
<head>
<link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />
<script src="http://visjs.org/dist/vis.js"></script>
</head>
<body>
<div id="mytimeline"></div>

<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('mytimeline');

// Create a DataSet with data (enables two way data binding)
var data = new vis.DataSet([
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
]);

// Configuration for the Timeline
var options = {};

// Create a Timeline
var timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>

Gallery

This gallery gives an idea of the features and possibilities of the library. The source code of the examples can be found in the examples
directory.

Timeline

The timeline from vis.js displays different types of data on a timeline.

basic usage

interactive

a lot of data

html data

groups

event listeners

custom time bar

edit items

order groups

limit move and zoom

points

custom styling

past and future

a lot of grouped data

item class names

navigation menu

data serialization

range overflow

localization

click to use

set selection

window adjustment

Network

The Network visualization visualizes graphs and networks with customizable styles.

basic usage

random nodes

images

shapes

social network

groups

selections

mobile friendly

sizing

multiline text

custom style

scalable images

dashed lines

dot language

playground

dynamic data

network info

fully random nodes clustering

scale free graph clustering

navigation

data manipulation

les miserables

hierarchical layout

hierarchical layout userdefined

physics configuration

static smooth curves

world cup network

world cup network performance

neighborhood highlight

importing from gephi

localization

graphviz gallery

Graph2d

The Graph2d visualizes bars and lines in time.

basic

bars

groups

right axis

both axis

interpolation

scrolling and sorting

performance

external legend

bars side by side

bars side by side groups

custom range

localization

toggle groups

Graph3d

The Graph3d from vis.js visualizes three and four dimensional data.

basis

camera

filter

animate

line

moving dots

dot cloud colors

dot cloud size

mobile

styles

tooltips

playground

Docs

Documentation is available here: Documentation

License

Copyright (C) 2010-2014 Almende B.V.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing
permissions and limitations under the License.

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

标签：

相关文章推荐

新的分享

章节导航