1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Anuncie Aqui
    Anuncie aqui você Também: fdantas@4each.com.br

Bind ng2-nvd3 chart with component in Angular 2 using dispatch

Discussão em 'Angular' iniciado por Igor Vatsenko, Setembro 27, 2024.

  1. I'm need to update data in chart and keep user configuration of chart (multiBarChart, stacked option).

    Here is my component

    ...
    <nvd3 [options]="options" [data]="data"></nvd3>
    ...

    export class DashboardComponent implements OnInit {
    @ViewChild(nvD3) nvD3: nvD3;
    stream$: Observable<Line[]>;
    stacked: boolean;
    data: any[];
    options: any;
    constructor(private _chart: ChartService) { }
    ngOnInit() {
    this.stream$ = this._chart.stream$;
    this.data = [];
    this.stacked = false;
    .debounceTime(500)
    .subscribe(
    counter => {
    this.nvD3.options.chart.stacked = this.stacked;
    this.data = counter;
    console.log("cahrtData emitted");
    this.nvD3.chart.update();
    }
    );
    this.options = {
    chart: {
    type: 'multiBarChart',
    height: 450,
    margin: {
    top: 20,
    right: 20,
    bottom: 50,
    left: 55
    },
    dispatch: {
    stateChange: function(e) {
    console.log('stateChange')
    this.stacked = e.stacked;
    }
    },
    "stacked": false,
    ...
    }
    }
    }


    }

    Seems that this.stacked in option have nothing to do with this.staked in component. So my question is how to bind stateChange with component variable in proper way?

    Continue reading...

Compartilhe esta Página