ng2-nvD3 на Angular2 2.1.1

Я пытаюсь использовать ng2-nvd3 (https://github.com/krispo/ng2-nvd3) в проекте Angular2 (ядро v2.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

У меня есть nvd3 и d3 в моем файле package.json, но я не уверен, что мне с ними делать.


angular d3.js nvd3.js ng2-nvd3
person Stu    schedule 08.11.2016    source источник

Ответы (5)


arrow_upward
1
arrow_downward

У меня была аналогичная проблема, и хотя это некрасиво, попробуйте включить в свой 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>
person methgaard    schedule 11.11.2016
comment
хм, я попробовал то же самое, скопировав локальные файлы (на которые ссылается ng2-nvd3), но это все еще приводит к ошибкам, возможно, это была неправильная версия. - person Akzidenzgrotesk; 11.11.2016

arrow_upward
0
arrow_downward

я исправил «nv не определен», добавив эти строки в мой vendor.ts (зависимости от поставщика)

import "d3";  
import "nvd3";
person user781861    schedule 18.11.2016

arrow_upward
0
arrow_downward

Вы можете проверить рабочее решение в очень простом репозитории по ссылке ниже. Он использует 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 в целевом компоненте (в данном случае app.component).

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

person ekuusi    schedule 29.11.2016

arrow_upward
0
arrow_downward

У меня была та же проблема, и я обнаружил, что она работает только с D3 версии 3, помимо уже упомянутых необходимых обходных путей.

person Marquis    schedule 29.12.2016

arrow_upward
0
arrow_downward

Для angular 2 RC6 попробуйте следующее: angular2-nvd3

person hendrathings    schedule 21.01.2017