visjs实现三维立体点状图表效果代码

代码语言:html

所属分类:图表

代码描述:visjs实现三维立体点状图表效果代码

代码标签: visjs 三维 立体 点状 图表

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  

  
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vis.4.21.0.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vis.4.21.0.js"></script>
</head>

<body>
  PC 1, 2, 3
<div id="pc123" style="width:80%"></div>
PC 1, 3, 4
<div id="pc134" style="width:80%"></div>


      <script>
//Timline demo created using vis.js - http://visjs.org/ 

//Configuration options for a timeline - http://visjs.org/docs/timeline.html#Configuration_Options



// DOM element where the Timeline will be attached
var pc123_div = document.getElementById('pc123');
var pc134_div = document.getElementById('pc134');

// Configuration for the Timeline as JSON object
var options = {
  width: '100%',
  editable: true, /* this option means you can add or remove items by clicking on the timeline */
  margin: {
    item: 20 } };



// Create a Timeline
var timeline = new vis.Graph3d(pc123_div, pc123(), options);
var timeline = new vis.Graph3d(pc134_div, pc134(), options);

function pc123() {
  var data = new vis.DataSet([{ "x": 2.6659, "y": -1.4265, "z": -0.608, "PC4": -0.9068, "Aircraft": "Airbus A319" },
  { "x": 6.9032, "y": 16.2428, "z": -4.5603, "PC4": -0.0506, "Aircraft": "Airbus A319 VIP" },
  { "x": 2.4103, "y": -1.5265, "z": -0.7083, "PC4": -0.9482, "Aircraft": "Airbus A320" },
  { "x": 2.4103, "y": -1.5265, "z": -0.7083, "PC4": -0.9482, "Aircraft": "Airbus A320 32-R" },
  { "x": -4.7047, "y": 0.9708, "z": 0.6199, "PC4": -0.6701, "Aircraft": "Airbus A330-200" },
  { "x": -4.6762, "y": 0.9983, "z": 0.5846, "PC4": 1.6746, "Aircraft": "Airbus A330-200 (3L2)" },
  { "x": -5.153, "y": 0.9558, "z": 0.4596, "PC4": -0.7869, "Aircraft": "Airbus A330-200 (3L3)" },
  { "x": -4.8537, "y": 0.7469, "z": 0.3278, "PC4": 1.5998, "Aircraft": "Airbus A330-300" },
  { "x": 2.7615, "y": -1.6387, "z": -0.3242, "PC4": -0.1971, "Aircraft": "Boeing 717" },
  { "x": 1.8389, "y": -1.4223, "z": -1.5152, "PC4": 1.2993, "Aircraft": "Boeing 737-700 (73W)" },
  { "x": 1.7652, "y": -1.4751, "z": -1.6996, "PC4": 1.3111, "Aircraft": "Boeing 737-800 (738)" },
  { "x": 1.5583, "y": -1.4905, "z": -1.8343, "PC4": 1.2722, "Aircraft": "Boeing 737-800 (73H)" },
  { "x": 1.3196, "y": -1.3466, "z": -1.6577, "PC4": 0.2513, "Aircraft": "Boeing 737-900ER (739)" },
  { "x": -7.2765, "y": 1.3057, "z": -0.4632, "PC4": -3.9734, "Aircraft": "Boeing 747-400 (74S)" },
  { "x": 1.1197, "y": -1.1254, "z": -1.2934, "PC4": -0.3351, "Aircraft": "Boeing 757-200 (75A)" },
  { "x": -2.2295, "y": 0.6042, "z": 0.8561, "PC4": 2.0165, "Aircraft": "Boeing 757-200 (75E)" },
  { "x": 1.8741, "y": -1.5165, "z": -1.3881, "PC4": -0.9236, "Aircraft": "Boeing 757-200 (75M)" },
  { "x": 1.8465, "y": -1.5465, "z": -1.376, "PC4": -0.9196, "Aircraft": "Boeing 757-200 (75N)" },
  { "x": 1.8885, "y": -1.4138, "z": -1.5403, "PC4": -0.3071, "Aircraft": "Boeing 757-200 (757)" },
  { "x": 1.4408, "y": -1.4126, "z": -1.8213, "PC4": -0.3438, "Aircraft": "Boeing 757-200 (75V)" },
  { "x": -1.8919, "y": 0.2431, "z": 0.4212, "PC4": 1.5441, "Aircraft": "Boeing 757-200 (75X)" },
  { "x": 1.0301, "y": -1.4042, "z": -2.0136, "PC4": -0.3908, "Aircraft": "Boeing 757-300" },
  { "x": -3.8445, "y": 0.7243, "z": 0.9586, "PC4": 1.9065, "Aircraft": "Boeing 767-300 (76G)" },
  { "x": -4.173, "y": 1.0134, "z": 1.1592, "PC4": -0.541, "Aircraft": "Boeing 767-300 (76L)" },
  { "x": -0.0221, "y": -1.7461, "z": -3.0022, "PC4": 1.2887, "Aircraft": "Boeing 767-300 (76P)" },
  { "x": -0.0221, "y": -1.7461, "z": -3.0022, "PC4": 1.2887, "Aircraft": "Boeing 767-300 (76Q)" },
  { "x": -4.1216, "y": 1.0349, "z": 1.1961, "PC4": -0.5488, "Aircraft": "Boeing 767-300 (76T)" },
  { "x": -1.2438, "y": -0.7269, "z": -1.799, "PC4": 2.2834, "Aircraft": "Boeing 767-300 (76U)" },
  { "x": -4.2285, "y": 0.8824, "z": 1.0048, "PC4": -0.4944, "Aircraft": "Boeing 767-300 (76Z V.1)" },
  { "x": -3.9101, "y": 0.8197, "z": 0.9994, "PC4": 1.8576, "Aircraft": "Boeing 767-300 (76Z V.2)" },
  { "x": -4.6414, "y": 1.034, "z": 0.9467, "PC4": -0.6397, "Aircraft": "Boeing 767-400 (76D)" },
  { "x": -5.8512, "y": 1.0406, "z": 0.2679, "PC4": -0.9847, "Aircraft": "Boeing 777-200ER" },
  { "x": -6.0401, "y": 1.1167, "z": 0.2582, "PC4": -0.9896, "Aircraft": "Boeing 777-200LR" },
  { "x": 4.2461, "y": 1.0823, "z": 5.5375, "PC4": -0.0572, "Aircraft": "CRJ 100/200 Pinnacle/SkyWest" },
  { "x": 4.2461, "y": 1.0823, "z": 5.5375, "PC4": -0.0572, "Aircraft": "CRJ 100/200 ExpressJet" },
  { "x": 3.784, "y": -1.4304, "z": 0.1879, "PC4": -0.8837, "Aircraft": "CRJ 700" },
  { "x": 3.5749, "y": -1.4616, "z": -0.0428, "PC4": -0.872, "Aircraft": "CRJ 900" },
  { "x": 5.111, "y": 1.0068, "z": 6.7253, "PC4": 1.1276, "Aircraft": "E120" },
  { "x": 3.3361, "y": -1.565, "z": -0.226, "PC4": -1.1256, &qu.........完整代码请登录后点击上方下载按钮下载查看

网友评论0