交互式的三维图表 Z3d

码农软件 · 软件分类 · 报表/图表制作 · 2019-08-19 18:59:22

软件介绍

Z3d 可用来生成交互式的三维图表。

Example


示例代码:

<html>
  <head>
    <script src="bower_components/threejs/build/three.min.js" charset="utf-8"></script>
    <script src="bower_components/z3d/js/OrbitControls.js" charset="utf-8"></script>
    <script src="bower_components/z3d/js/plot.js" charset="utf-8"></script>
  </head>
  <body>
    <div id='myDOMel'></div>
    <script type="text/javascript">

      //HERE IS THE DATA TO PLOT:
      var x = [-0.8234, 0.0952, 1.9594, -0.2831, -0.4147, 1.5859, 0.5326, 0.0925, 0.3293, 1.3635, 0.3396, 0.0677, -0.6739, 0.4084, -1.4487, -0.1101, -0.7521, -1.2118, 1.7191, 0.2020, -0.1573, -0.2298, -0.8230, 1.7924, 0.4511];
      var y = [-1.4166, 1.353, -0.6294, 0.0567, 1.4157, 0.32806, 0.2377, -0.2262, -1.0602, -1.8150, 0.1075, -1.3516, 1.0137, 0.0183, -0.5466, 0.6416, -0.6655, 0.6874, -0.4616, -0.2808, 1.3443, -1.0518, -0.1332, -1.0097, 0.3643];
      var z = [1.4166, -1.353, 0.6294, -0.0567, -1.4157, -0.32806, -0.2377, 0.2262, 1.0602, -1.5089, 0.1543, -0.3516, 0.0137, 1.0183, 1.5466, -1.6416, 1.6655, -1.6874, -0.4616, -1.2808, -1.3443, 1.0518, -0.1332, 1.9700, -0.3643];


      //make a function to generate random colors for the points in our example
      function getHexColor(){
        var chars = ['1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
        var string = '';
        for (var i=0;i<6;i++){
          var index = Math.floor(Math.random()*16);
          string += chars[index];
        }
        return string;
      }

      //now we generate size and color arrays for our points
      var sizes = [];
      var colors = [];
      for (var i=0; i<x.length; i++){
        sizes.push(Math.random());
        colors.push(getHexColor());
      }

      //THIS IS WHERE WE MAKE THE CONFIGURATION OBJECT:
      var config = {
        size: sizes,
        color: colors,
        //height and width of the DOM element
        height: 400,
        width: 400,
        elementID: 'myDOMel'
      }

      //AND THIS IS HOW WE PLOT IT:
      var plot = plot3d(x,y,z,config);

    </script>
  </body>

</html>

本文地址:https://codercto.com/soft/d/12728.html

The Definitive Guide to HTML5 WebSocket

The Definitive Guide to HTML5 WebSocket

Vanessa Wang、Frank Salim、Peter Moskovits / Apress / 2013-3 / USD 26.30

The browser is, hands down, the most popular and ubiquitous deployment platform available to us today: virtually every computer, smartphone, tablet, and just about every other form factor imaginable c......一起来看看 《The Definitive Guide to HTML5 WebSocket》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具