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": &.........完整代码请登录后点击上方下载按钮下载查看

网友评论0