web-dev-qa-db-ja.com

vis.js libをAngular2で動作させる方法は？

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>
angularangular2-templatevis.jsvis.js-timeline
9
CommonSenseCode

これは、投稿したコードを統合した単純なプランカーです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);
  }
9
TGH

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);
    }
}
17
meenu1meen

angularディレクティブを使用すると、この問題を解決するためのクリーンなアプローチになります。vis.jsのインストールから始めましょう。

npm install vis

Visチャートを表示するコンポーネントには、チャートのコンテナ要素が必要です。

graph-visualization.component.html

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

graph-visualization.component.css

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

graph-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の管理であるため、それを処理するディレクティブを作成できます。
  • NgOnInitではなくngAfterContentInitを使用しました。これにより、グラフ生成部分が遅延し、他の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のすべての機能をサポートしているわけではありません

8
Sairam Krish

さて、上記で提案されたコードに必要ないくつかの変更は、バイパスするのに時間がかかりました...だから私はこれらを共有します：

1）html部分の@ ViewChild（ 'netWords'）netContainer：ElementRef;および＃netWordsでコンテナにアクセスする必要があります。

2）nativeElementプロパティを使用してコンテナ要素に完全にアクセスする必要があるため、これはthis.network = new Vis.Network（this.netContainer.nativeElement、data、options）;になります。

これらの変更で機能するはずです。

1
Marc