文章/答案/技术大牛

发布

社区首页 >问答首页 >Angular2 2.1.1上的ng2-nvD3

问Angular2 2.1.1上的ng2-nvD3
EN

Stack Overflow用户

提问于 2016-11-09 02:50:58

回答 5查看 2.1K关注 0票数 0

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

我已经在@MgModule的声明中放入了nvD3：

  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，但我不确定我应该如何处理它们。

ng2-nvd3

angular

d3.js

nvd3.js

回答 5

Stack Overflow用户

发布于 2016-11-11 18:25:12

我也遇到过类似的问题，虽然不是很好，但可以试着在你的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>

票数 1

Stack Overflow用户

发布于 2016-11-19 05:41:18

I通过将这些行添加到我的vendor.ts (供应商依赖项)，修复了'nv is not defined‘。

import "d3";  
import "nvd3";

票数 0

Stack Overflow用户

发布于 2016-11-30 03:31:37

您可以在下面的链接中查看一个非常简单的存储库中的工作解决方案。它使用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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40494365

复制

相似问题

问Angular2 2.1.1上的ng2-nvD3
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular2 2.1.1上的ng2-nvD3EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular2 2.1.1上的ng2-nvD3
EN