2016-11-08 41 views
0

我想在Angular2項目(核心v2.1.1)中使用ng2-nvd3(https://github.com/krispo/ng2-nvd3),但它不起作用。Angular2上的ng2-nvD3 2.1.1

我已經把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,但我不確定我應該如何處理它們。

回答

1

我也有類似的問題,雖然it's不漂亮,嘗試包括您的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> 
+0

HM,我嘗試同樣通過複製本地文件(由NG2-nvd3引用),但仍然導致錯誤,可能是錯誤的版本。 – Akzidenzgrotesk

+0

你確定它是正確的參考嗎? – methgaard

0

我固定加入這些行到我的供應商「NV沒有定義」 .ts(供應商依賴)

import "d3"; 
import "nvd3"; 
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) 

此設置允許在目標組件(應用程序使用nvd3的。組件在這種情況下)。

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

0

我有同樣的問題,發現它只有D3 3版本的作品,除了已經提到的需要的解決方法。