js и angular для отображения некоторых графиков на моей веб-странице. Я установил
npm install vis
npm install @type/vis
, но обнаружил, что оба имеют функцию DataView. Я хочу использовать DataView для vis, но кажется, angular автоматически находит DataView для @ type / vis.
Мой код выглядит так:
import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { Network, DataSet, DataView} from 'vis';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements AfterViewInit {
@ViewChild('network', {static: false}) el: ElementRef;
@ViewChild('nodeFilterSelect', {static:false}) nodeFilter: ElementRef;
@ViewChild('edgesFilter', {static: false}) edgeFilter: ElementRef;
private networkInstance: any;
ngAfterViewInit() {
const nodes_set = new DataSet<any>([
{ id: 1, label: 'Eric Cartman', age: 'kid', gender: 'male' },
{ id: 2, label: 'Stan Marsh', age: 'kid', gender: 'male' },
{ id: 3, label: 'Wendy Testaburger', age: 'kid', gender: 'female' },
{ id: 4, label: 'Mr Mackey', age: 'adult', gender: 'male' },
{ id: 5, label: 'Sharon Marsh', age: 'adult', gender: 'female' }
]);
const edges_set = new DataSet<any>([
{ from: 1, to: 2, relation: 'friend', arrows: 'to, from', color: { color: 'red'} },
{ from: 1, to: 3, relation: 'friend', arrows: 'to, from', color: { color: 'red'} },
{ from: 2, to: 3, relation: 'friend', arrows: 'to, from', color: { color: 'red'} },
{ from: 5, to: 2, relation: 'parent', arrows: 'to', color: { color: 'green'} },
{ from: 4, to: 1, relation: 'teacher', arrows: 'to', color: { color: 'blue'} },
{ from: 4, to: 2, relation: 'teacher', arrows: 'to', color: { color: 'blue'} },
{ from: 4, to: 3, relation: 'teacher', arrows: 'to', color: { color: 'blue'} },
]);
const nodesView = new DataView(nodes_set, {})
const edgesView = new DataView(edges_set, {})
const container = this.el.nativeElement;
const data = { nodes: nodes_set, edges: edges_set };
[![enter image description here][1]][1]
this.networkInstance = new Network(container, data, {});
}
}
вы можете видеть, что я импортирую DataView из vis, но мы ставим курсор на DataView, это выглядит так:
![enter image description here](https://i.stack.imgur.com/TTCZo.png)
И DataView в @ type / vis:
export class DataView<T extends DataItem | DataGroup> {
length: number;
constructor(items: T[]);
}
Кажется, angular находит DataView типа @ type / vis, даже если я импортирую его из vis. Как решить эту проблему?