0

我正在尝试在 Angular2 项目（核心 v2.1.1）中使用 ng2-nvd3（https://github.com/krispo/ng2-nvd3），但它不起作用。

我已将 nvD3 放入 @MgModule 的声明中：

  declarations: [
        ...
        TestComponent,
        nvD3,
      ],

我已经按照描述设置了组件：

import {Component} from '@angular/core';
import {nvD3} from 'ng2-nvd3';
declare let d3:any;

@Component({
    template: '<div><nvd3 [options]="options" [data]="data"></nvd3></div>'
})
export class TestComponent {
    options;
    data;
    ngOnInit(){
        this.options = {
            chart: {
                type: 'discreteBarChart',
                height: 450,
                margin : {
               ...

但我得到了错误：

EXCEPTION: Uncaught (in promise): Error: Error in ./TestComponent class TestComponent - inline template:0:31 caused by: nv is not defined

我的 package.json 文件中有 nvd3 和 d3，但我不确定应该如何处理它们。

4

5 回答 5

1

我有一个类似的问题，虽然它不是很漂亮，但尝试在 index.html 中包含以下内容：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js"></script>
于 2016-11-11T10:25:11.997 回答
0

对于 angular 2 RC6 up 试试这个:: angular2-nvd3

于 2017-01-21T02:57:49.750 回答
0

我通过将这些行添加到我的 vendor.ts （供应商依赖项）来修复“未定义 nv”

import "d3";  
import "nvd3";
于 2016-11-18T21:41:18.300 回答
0

我遇到了同样的问题，发现它只适用于 D3 版本 3，除了已经提到的所需解决方法。

于 2016-12-29T22:49:00.103 回答
0

您可以在下面链接中的一个非常简单的 repo 中查看有效的解决方案。它使用 Webpack 进行捆绑。

已安装软件包中的相关文件是

/public/stylesheets/nv.d3.min.css (copied from nvd3 node-modules folder)
/assets/nvd3/ng2-nvd3.ts (copied from ng2-nvd3 node-modules folder)
/assets/app/shared/nv.d3.min.js (copied from nvd3 node-modules folder)
(note: my current workaround doesn't use the nvd3.module.ts file)

然后在项目本身中，让一切正常工作：

/views/index.hbd (link to styles)
/assets/app/app.module.ts (declare nvD3)
/assets/app/app.component.ts (import nvD3 and nv.d3.min.js, declare d3)

此设置允许在目标组件（本例中为 app.component）中使用 nvd3。

https://github.com/ekuusi/nvd3-ng2-grid-issue

于 2016-11-29T19:31:36.800 回答