如何使 vis.js 库与 Angular2 一起工作？

Question

我正在尝试使用 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>

Answer 1

这是一个简单的 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);
  }

Answer 2

请在下面找到使用 angular2 和 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);
    }
}

Answer 3

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

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

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

它应该适用于这些修改。

Answer 4

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

npm install vis

显示可视化图表的组件应该有图表的容器元素。假设

图表-visualization.component.html

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

图表-visualization.component.css

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

图-visualization.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

的所有功能

如何使 vis.js 库与 Angular2 一起工作？

How to make vis.js lib to work with Angular2?

vis.js

angular2-template

angular

vis.js-timeline