11

我正在尝试使用visjs lib，但无法使他们的入门示例正常工作，如下所示：

<script type="text/javascript">
    // DOM element where the Timeline will be attached
    var container = document.getElementById('visualization');

    // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([
        {id: 1, content: 'item 1', start: '2013-04-20'},
        {id: 2, content: 'item 2', start: '2013-04-14'},
        {id: 3, content: 'item 3', start: '2013-04-18'},
        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ]);

    // Configuration for the Timeline
    var options = {};

    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);
</script>
4

4 回答 4

21

请在下面找到使用angular2with 的代码，vis您只需要安装vis和导入它。在这个例子中，我为 vis 库创建了一个 angular2 组件。

import { Component , OnInit, OnDestroy } from '@angular/core';
import { Network, DataSet, Node, Edge, IdType } from 'vis';
@Component({
  selector: 'network-graph',
  templateUrl: './network-graph.component.html'
})
export class NetworkGraphComponent implements OnInit{
    public nodes: Node;
    public edges: Edge;
    public network : Network;

    public ngOnInit(): void {
          var nodes = new DataSet([
              {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'}
          ]);
            // create an array with edges
            var edges = new DataSet([
              {from: 1, to: 3},
              {from: 1, to: 2},
              {from: 2, to: 4},
              {from: 2, to: 5},
              {from: 3, to: 3}
            ]);
           // create a network
          var container = document.getElementById('mynetwork');
          var data = {
            nodes: nodes,
            edges: edges
          };
          var options = {};
          var network = new Network(container, data, options);
    }
}
于 2017-04-26T06:43:36.223 回答
12

这是一个简单的 plunker，集成了您使用 Angular 2 https://plnkr.co/edit/TbPTfXFk4RSAuPn4BBxP?p=preview发布的代码

在此示例中，集成在 OnInit

ngOnInit() {
    var container = document.getElementById('visualization');

    // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([
        {id: 1, content: 'item 1', start: '2013-04-20'},
        {id: 2, content: 'item 2', start: '2013-04-14'},
        {id: 3, content: 'item 3', start: '2013-04-18'},
        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ]);

    // Configuration for the Timeline
    var options = {};

    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);
  }
于 2016-10-28T02:06:07.560 回答
11

使用角度指令将是解决此问题的一种干净方法。让我们从安装 vis.js 开始

npm install vis

显示 vis 图表的组件应该有一个图表的容器元素。比方说

图-visualization.component.html

<div [appGraphVis]="graphData" class="graph-container"></div>

图形可视化.component.css

.graph-container {
    height: 25em;
    widows: 100%;
}

图形可视化.component.ts

import { Component, OnInit } from '@angular/core';
import { DataSet } from 'vis';

@Component({
  selector: 'app-graph-visualization',
  templateUrl: './graph-visualization.component.html',
  styleUrls: ['./graph-visualization.component.css']
})
export class GraphVisualizationComponent {
  graphData = {};

  constructor() { }

  ngAfterContentInit(){
    // create an array with nodes
    var nodes = new DataSet([
      {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'}
    ]);

    // create an array with edges
    var edges = new DataSet([
      {from: 1, to: 3},
      {from: 1, to: 2},
      {from: 2, to: 4},
      {from: 2, to: 5}
    ]);

    // provide the data in the vis format
    this.graphData["nodes"] = nodes;
    this.graphData["edges"] = edges;
  }

}

注意几点：

  • 这个组件只计算需要可视化的数据，它不做任何事情，比如操作 DOM 或直接使用 vis.js。由于 vis.js 是一个 DOM 操作，我们可以有一个指令来处理它
  • 使用 ngAfterContentInit 而不是 ngOnInit。这将延迟图形生成部分并允许其他 DOM 相关任务完成

graphvis.directive.ts

import { Directive, TemplateRef, ViewContainerRef, Input, Renderer2, ElementRef } from '@angular/core';
import { Network } from 'vis';

@Directive({
  selector: '[appGraphVis]'
})
export class GraphVisDirective {
  network;

  constructor(private el: ElementRef) {}

  @Input() set appGraphVis(graphData){
    console.log('graph data ', graphData);
    var options = {};

    if(!this.network){
      this.network = new Network(this.el.nativeElement, graphData, options);
    }

  }

}

为简单起见，我将选项保留在指令中。在现实世界中，选项将作为来自高级组件的另一个输入传递。

附加说明，我们可以为 vis 添加 typescript 的类型以在开发和调试期间提供帮助。它在这里可用：

yarn add @types/vis -D

如果您正在寻找一个现成的解决方案，请查看这个库 - angular-vis。在撰写本文时，它并不支持 vis.js 的所有功能

于 2018-04-12T12:35:00.163 回答
1

好吧，上面提出的代码需要一些修改，这让我花了一段时间才绕过......所以我分享这些：

1) 你需要通过@ViewChild('netWords') netContainer: ElementRef;来访问容器 和html 部分中的#netWords。

2）您需要使用 nativeElement 属性完全访问容器元素，所以这将是 this.network = new Vis.Network(this.netContainer.nativeElement, data, options);

它应该适用于这些修改。

于 2018-04-07T07:24:11.943 回答