visjs实现三维立体点状图表效果代码-html代码-BFW代码库

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

代码语言：html

所属分类：图表

代码描述：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)" },
  { &quo.........完整代码请登录后点击上方下载按钮下载查看