Angular5: Dygraph не определен во время выполнения - PullRequest
Новая
       21

Angular5: Dygraph не определен во время выполнения

0 голосов
/ 24 августа 2018

Используя Angular 5 в сочетании с библиотекой dygraphs, во время выполнения я получаю сообщение об ошибке: «Dygraph не определен», хотя библиотека dygraphs установлена.

файл component.ts: 

import { Component, AfterViewInit } from '@angular/core';

declare var Dygraph: any;

@Component({
...
})
export class MyComponent implements AfterViewInit {

  constructor() {
  }

  ngAfterViewInit() {
      let div = document.getElementById('divId');
      new Dygraph(div, "Time,Value\n", {});
  }
}

файл component.html: 

<div id="divId"></div>

файл package.json: 

 "dependencies": {
    ...
    "dygraphs": "^2.1.0",
  },

Можно ли использовать чистые графики с Angular2 +? Есть библиотека ng-dygraphs, но я бы хотел использовать чистые dygraphs.

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Хотя я чувствую, что многое из этого взломал, он получил соответствующий результат. Три случая dygraphs на веб-странице. Сначала я попытался с ng-dygraphs безуспешно, поэтому я попытался вставить dygraphs без оболочки, используя информацию в https://github.com/danvk/dygraphs-es6 в сочетании с более ранним ответом здесь от Андрея Тэтара.

Я не редактировал файл package.json, как в Q. Недостающим элементом без обертки было добавление типографий (уже добавив dygraphs и ng-dygraph и сделав это в проекте, построенном на angular-cli): 

ng add @types\dygraphs

тогда этот код работал 

<div #graph></div>

с подробной информацией о компоненте (@ViewChild magic из Создание оболочки Angular2 для компонента / директивы для Dygraphs .) 

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import Dygraph from 'dygraphs';

@Component({
  selector: 'app-dygraph',
  templateUrl: './dygraph.component.html',
  styleUrls: ['./dygraph.component.css']
})
export class DygraphComponent implements OnInit {
  @ViewChild('graph')
  graphdiv: ElementRef;
  ngOnInit() {
    new Dygraph(this.graphdiv.nativeElement,
      `Date,A,B
      2016/01/01,10,20
      2016/07/01,20,10
      2016/12/31,40,30
      `, {
        fillGraph: true
    });  
  }

успех с графиками. Поэтому я снова вернулся к добавлению ng-графов. И продолжал получать ту же ошибку, так что в конце концов я вошел и отредактировал 

node_modules\ng-dygraphs\ng-dygraphs.es5.js

и 

node_modules\ng-dygraphs\ng-dygraphs.js

включить строку: 

import Dygraph from 'dygraphs';

ng-dygraphs затем "нашли" Dygraphs и ... у меня тоже есть три тенденции.

В моем файле app.component.html есть три из трех направлений. 

<app-dygraph></app-dygraph>
<app-dygraph></app-dygraph>
<app-dygraph></app-dygraph>

Отказ от ответственности: я просто взломал это, пока это не сработало для меня. YMMV.

0 голосов
/ 24 августа 2018

Проблема в том, что машинопись не знает типов, и вам также нужно импортировать то, что вы используете Dygraph из модуля dygraphs. Попробуйте установить набрав файлы:

npm install --save-dev @types/dygraphs

и в вашем файле: 

import Dygraph from 'dygraphs';

... 

new Dygraph(...)
...