如何在angularjs中使用visjs创建网络图或层次树？


How to create network graph or hierarchical tree using visjs in angularjs?

在angularjs中使用visjs创建网络图时，我需要一些帮助。 我正在研究这个矮人，以实现这样的目标

我按照AngularJS-visjs中提到的步骤进行操作，但是无法使其正常工作，因此我创建了一个插件(如上所述)以获取社区的帮助。

控制器代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
var app = angular.module('app', ['ngVis']);

app.controller('MainCtrl', ['$scope', 'VisDataSet',

  function($scope, VisDataSet) {
      $scope.data = VisDataSet({
         "1": {
             "id": 1,
             "content":"<i class=\"fi-flag\"> item 1",
             "start":"2014-09-01T17:59:13.706Z",
             "className":"magenta",
             "type":"box"
          },
         "2": {
             "id": 2,
             "content":"visjs.org",
             "start":"2014-09-02T17:59:13.706Z",
             "type":"box"
          },
         "3": {
             "id": 3,
             "content":"item 3",
             "start":"2014-08-29T17:59:13.706Z",
             "type":"box"
          },
         "4": {
             "id": 4,
             "content":"item 4",
             "start":"2014-09-01T17:59:13.706Z",
             "end":"2014-09-03T17:59:13.706Z",
             "type":"range"
          },
         "5": {
             "id": 5,
             "content":"item 5",
             "start":"2014-08-30T17:59:13.706Z",
             "type":"point"
          },
         "6": {
             "id": 6,
             "content":"item 6",
             "start":"2014-09-04T17:59:13.706Z",
             "type":"point"
          },
         "7": {
             "id": 7,
             "content":"<i class=\"fi-anchor\"> item 7",
             "start":"2014-08-28T17:59:13.706Z",
             "end":"2014-08-29T17:59:13.706Z",
             "type":"range",
             "className":"orange"
          }
      });
      $scope.options = {
         "align":"center",
         "autoResize": true,
         "editable": true,
         "selectable": true,
         "orientation":"bottom",
         "showCurrentTime": true,
         "showCustomTime": true,
         "showMajorLabels": true,
         "showMinorLabels": true
      };
  }
]);

请帮我弄清楚这个问题

相关讨论

我看到了几个问题。 首先，您将css文件作为脚本而不是样式表包括在内。 所以使用这个：

1
2
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.3.0/vis.css">
<link rel="stylesheet" type="text/css" href="style.css">

其次，如果看一下angular-vis.js，您会发现指令实际上应该是vis-timeline。 所以我只是在html中将其更改为：

1
<vis-timeline data="data" options="options"></vis-timeline>

我删除了events属性，因为它不是在您的作用域上定义的，但是我假设您可以查看visjs文档，查看在那里应该做什么。

有关完整修补程序，请参阅修订的插件。

相关讨论