visjs

                            Vis.js

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

 

Timeline


    

code:

 

 

Network


Code:


Graph2d


Code

 

Graph3d


Code

<scripttype="text/javascript">

    vardata = null;

    vargraph = null;

 

   function custom(x, y) {

     return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);

    }

 

    //Called when the Visualization API is loaded.

   function drawVisualization() {

     // Create and populate a data table.

     data = new vis.DataSet();

     // create some nice looking data with sin/cos

     var counter = 0;

     var steps = 50;  // number ofdatapoints will be steps*steps

      var axisMax = 314;

     var axisStep = axisMax / steps;

     for (var x = 0; x < axisMax; x+=axisStep) {

       for (var y = 0; y < axisMax; y+=axisStep) {

         var value = custom(x,y);

         data.add({id:counter++,x:x,y:y,z:value,style:value});

       }

      }

 

      // specifyoptions

      var options = {

        width:  '600px',

        height:'600px',

        style:'surface',

       showPerspective: true,

        showGrid:true,

        showShadow:false,

       keepAspectRatio: true,

       verticalRatio: 0.5

      };

 

      // Instantiateour graph object.

      var container =document.getElementById('mygraph');

      graph = newvis.Graph3d(container, data, options);

    }

  </script>

参考学习site

Demo:http://www.cnblogs.com/lhb25/p/dynamic-browser-based-visualization-library.html

http://code.csdn.net/news/2819345

http://www.open-open.com/lib/view/open1397704538250.html

http://blog.csdn.net/shenzhennba/article/details/23877745


猜你喜欢

转载自blog.csdn.net/woshiyexinjie/article/details/43029707
今日推荐