Question

使用Angular 5结合dygraphs库，在运行时我收到一个错误：尽管已安装dygraphs库，但未定义'Dygraph'。

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库，但我想使用纯音符。

Answer 1

问题在于打字稿不知道类型，您还需要从模块Dygraph中导入dygraphs使用的内容。尝试安装键入文件：

npm install --save-dev @types/dygraphs

并在您的文件中：

import Dygraph from 'dygraphs';

... 

new Dygraph(...)

Answer 2

虽然我觉得我很喜欢它，但确实得到了相关的结果。网页上有三个笔画的实例。最初，我尝试使用ng-dygraphs没有成功，所以我尝试使用https://github.com/danvk/dygraphs-es6中的信息以及AndreiTătar的较早回答 here 插入没有包装的dygraph。

我没有像Q中那样编辑package.json文件。缺少包装器的缺失部分是添加类型（已经添加了字形图和ng-dygraph，并在angular-cli构建的项目中执行了此操作）：

ng add @types\dygraphs

然后此代码有效

<div #graph></div>

包含组件详细信息（来自Creating Angular2 component/directive wrapper for Dygraphs的@ViewChild魔术。）

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-graphs的过程。并不断出现相同的错误，所以最终我进入编辑页面

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。

Answer 3

您需要将dygraph和type / dygraphs软件包都安装到Angular Project中

npm i dygraphs --save npm i @types/dygraphs --save 之后，只需在使用Dygraphs的组件中编写此代码

declare var Dygraph:any;

对我来说很有效。使用它们时没有显示任何错误。我正在使用Angular 8。

Angular5：Dygraph在运行时未定义

3 个答案: