需要在angularjs使用visjs创建网络图帮助

问题描述

我需要做出类似工作的东西帮助此相例如angularjs 的。

I need help in making this plunker work something similar to this vis example in angularjs.

我使用＆LT; VIS-网络数据=数据选项=选项＆GT;＆LT; / VIS-网络＆gt; 标签及以下的数据和选项

I am using <vis-network data="data" options="options"></vis-network> tag and below data and options

数据

var nodes = [
  {id: 1, label: 'Node 1'},
  {id: 2, label: 'Node 2'},
  {id: 3, label: 'Node 3'},
  {id: 4, label: 'Node 4'},
  {id: 5, label: 'Node 5'}
];
var edges = [
  {from: 1, to: 3},
  {from: 1, to: 2},
  {from: 2, to: 4},
  {from: 2, to: 5}
];
$scope.data = VisDataSet({
  nodes: nodes,
  edges: edges
});

选项

$scope.options = {
  autoResize: true,
  height: '100%',
  width: '100%'
};

有没有控制台错误，我错过了什么。请帮助。

There is no console error, what am I missing. Please help.

推荐答案

您的数据是普通的对象，但是节点＆安培; 边缘应 VisDataSet

Your data is plain object, however nodes & edges should be an object of VisDataSet

var nodes = VisDataSet([
  {id: 1, label: 'Node 1'},
  {id: 2, label: 'Node 2'},
  {id: 3, label: 'Node 3'},
  {id: 4, label: 'Node 4'},
  {id: 5, label: 'Node 5'}
]);
var edges = VisDataSet([
  {from: 1, to: 3},
  {from: 1, to: 2},
  {from: 2, to: 4},
  {from: 2, to: 5}
]);
$scope.data = {
  nodes: nodes,
  edges: edges
};

我在这里更新您的 plunker。

I have updated your plunker here.

这篇关于需要在angularjs使用visjs创建网络图帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！