如何使用`vis.js`显示JSON数据

时间:2018-03-02 17:56:28

标签: php mysql json vis.js vis.js-network

我希望用vis.js显示来自MySQL的数据。 我用JSON获取数据,但是我遇到了这个错误:

  

错误:节点必须有ID

  throw new Error("Node must have an id");
  -------^

function tampil()
{
	$.ajax({
		type:"GET",
		cache :false,
		dataType: "json",
		url:"fetch.php",
		success: function(data){
			console.log(data);
			
			var vertex = new vis.DataSet([
			    {id:data[0], label:data[1]}
			]);
			var hubung = new vis.DataSet([
			    {from:data[2], to:data[3]}
			]);
			var myDiv = document.getElementById("media");
			var data = {
				nodes : vertex,
				edges : hubung
			}
			
			var options = {};
			
			var network = new vis.Network(myDiv,data,options);
		}
	});
}
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="js/vis.js"></script>
	<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/vis.css" />
</head>
<body>
 <button type="button" onclick="tampil()">proses</button>
 <div id="media" style="width:500px;height:500px;"></div>
</body>
</html>

我的服务器就像这样

1 个答案:

答案 0 :(得分:0)

已解决,在JavaScript中我添加了以下代码:

function tampil()
{
	$.ajax({
		type:"GET",
		cache :false,
		dataType: "json",
		url:"nodes.php",
		success: function(data){
			console.log(data);
				
			var vertex = new vis.DataSet();
			var hubung = new vis.DataSet();
			var myDiv = document.getElementById("media");
			var data = {
				nodes : vertex,
				edges : hubung
			}
			
			var options = {};
			
			var network = new vis.Network(myDiv,data,options);
			
			$.getJSON('edges.php', function(edges) {
				hubung.add(edges);
			});
			$.getJSON('nodes.php', function(nodes) {
				vertex.add(nodes);
			});
		}
	});
}