本文参考 https://github.com/almende/vis 编写并且自己总结各种快捷方式,意在帮助开发可视化图表的前端朋友快速了解visJs。

vis.js

Vis.js是一个基于浏览器的动态可视化库。该库旨在易于使用,处理大量动态数据,并支持数据操作。该库包含以下组件:

  • DataSet和DataView。灵活的基于键/值的数据集。添加,更新和删除项目。订阅数据集中的更改。DataSet可以过滤和订购商品,并转换商品的字段。
  • 数据视图。DataSet上的筛选和/或格式化视图。
  • Graph2d。使用线条或条形图在时间轴上绘制数据。
  • Graph3d。以三维图形显示数据。
  • 网络。显示包含节点和边的网络(强制有向图)。
  • 时间线。在时间轴上显示不同类型的数据。

visJs 可开发的视图有:

  • 网络图(也可以叫做 拓扑图、关系图、力导向图。);
  • 时间轴;
  • graph2d(2d图表--柱形图、折线图、堆叠图、散点图)
  • graph3d(3d图标--xxxxxx)

visJs 官网各种链接快捷方式

本篇文档总结完毕,下篇文档具体介绍visJs 网络图(拓扑图、关系图、力导向图) 开发

demo演示

最后:

  本文档意在与帮助初学者快速构建可视化项目。请不要随意转载,如需转载保存,请署上 转载地址。谢谢配合。

初识 visJs (基于html5 canvas开发的可视化框架)的更多相关文章

  1. 18个基于 HTML5 Canvas 开发的图表库

    如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...

  2. 基于html5 Canvas图表库 : ECharts

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

  3. 基于html5 canvas和js实现的水果忍者网页版

    今天爱编程小编给大家分享一款基于html5 canvas和js实现的水果忍者网页版. <水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版 ...

  4. 基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

    基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块 前言 最近学习了 HT for Web flow 插件,除了正常的 flow 效果,其中还有两个十分好用的两个接口 getPercen ...

  5. 基于HTML5 Canvas和jQuery 的绘图工具的实现

    简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成 ...

  6. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  7. 基于HTML5 Canvas的线性区域图表教程

    之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...

  8. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  9. 基于HTML5 Canvas实现用户交互

    很多人都有这样的疑问,基于HTML5 Canvas实现的元素怎么和用户进行交互?在这里我们用到HT for Web(http://www.hightopo.com/guide/guide/core/b ...

随机推荐

  1. hdu6325 Interstellar Travel 凸包变形

    题目传送门 题目大意: 给出n个平面坐标,保证第一个点和第n个点y值为0,其余点的x坐标都在中间,要从 i 点走到 j 点的要求是 i 点的横坐标严格小于 j 的横坐标,并且消耗的能量是(xi * y ...

  2. ansys14.0 从入门到精通

    凌桂龙 李战分 2013.2 清华大学 FLUENT流体计算应用教程 索书号:TB126-39 ZW2.1     单元 结点 和 自由度 载荷 与 边界条件 : 关系 就是约束 , 边界条件是 结构 ...

  3. jQuery随笔-自定义属性获取+tooltip

    1.Jquery自定义属性获取 1) 通过自定义属性值获取document console.log($('[data-id='+item_id+']',listWrap)); $('[data-id= ...

  4. gulp打包js

    在终端定位到你要创建目录的地方,输入 sudo mkdir js 创建文件夹,这个文件夹就是放你要压缩js文件的地方 输入 sudo vim gulpfile.js 这个js就是写gulp所有的配置信 ...

  5. python 爬虫系列05--丑事百科

    丑事百科爬虫 import re import requests def parse_page(url): headers = { 'User-Agent':'user-agent: Mozilla/ ...

  6. Git学习手记

    直接使用github的客户端即可 1.简介 集中化的版本控制系统( Centralized Version Control Systems,简称 CVCS )应运而生.这类系统,诸如 CVS,Subv ...

  7. C#(Winform)的Show()和ShowDialog()方法

    1. 显示窗口的两种方式: Winform中的Form,在显示窗口时,可以使用Show()和ShowDialog()两种方式 2. 非模态窗口方式(可以跟其他界面自由切换,而且不阻塞代码) Show( ...

  8. 如何运营亿级QPS的Redis系统

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:冯伟源,高级工程师,腾讯云Redis系统运维负责人.6年DBA经验,一直从事SQL优化.实例调优.数据库架构.海量数据库集群运维.运营 ...

  9. 51nod 1245 Binomial Coefficients Revenge

    Description C(M,N) = M! / N! / (M - N)! (组合数).给出M和质数p,求C(M,0), C(M,1)......C(M,M)这M + 1个数中,有多少数不是p的倍 ...

  10. win10的xbox下载应用或者游戏时,出现0x80070422和0x80073D0A的解决办法

    这个错误:0x80070422是因为关闭了windows update这个服务导致的 这个错误:0x80073D0A是因为关闭了windows firewall这个服务导致的 具体操作: cmd下se ...