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

最新推荐文章于 2024-08-21 08:27:26 发布

baby_fmm

最新推荐文章于 2024-08-21 08:27:26 发布

阅读量1.9k

点赞数

分类专栏： javascript web开发文章标签：可视化库 javascript框架

javascript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

web开发

3 篇文章 0 订阅

订阅专栏

Vis.js 是一个动态的，基于浏览器的可视化库。该库被设计为易于使用，能处理大量的动态数据。该库由以下几部分组成：一是数据集和数据视图，基于灵活的键/值数据集，可以添加，更新和删除项目，订阅数据集变化；二是时间轴，用于显示不同类型的时间轴数据，在时间轴上项目可以交互移动，缩放和操纵；三是图形，使用节点和边显示一个交互式图形或网络。

　　时间轴效果可以看这里的 Demo，示例代码如下：

 
         <!doctype html> 
        
         <html> 
        
         <head> 
        
         <title>Timeline | Basic demo</title> 
        
         <script src= 
         "http://visjs.org/dist/vis.js" 
         ></script> 
        
         <link href= 
         "http://visjs.org/dist/vis.css"  
         rel= 
         "stylesheet"  
         type= 
         "text/css"  
         /> 
        
         <style type= 
         "text/css" 
         > 
        
         body, html { 
        
         font-family: sans-serif; 
        
         } 
        
         </style> 
        
         </head> 
        
         <body> 
        
         <div id= 
         "mytimeline" 
         ></div> 
        
         <script type= 
         "text/javascript" 
         > 
        
         var  
         container = document.getElementById( 
         'mytimeline' 
         ); 
        
         var  
         data = [ 
        
         {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' 
         } 
        
         ]; 
        
         var  
         options = {}; 
        
         var  
         timeline =  
         new  
         vis.Timeline(container, data, options); 
        
         </script> 
        
         </body> 
        
         </html>