使用调度将 ng2-nvd3 图表与 Angular 2 中的组件绑定

Question

我需要更新图表中的数据并保留图表的用户配置 （多条形图、堆叠选项）。

这是我的组件

...
<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,
                ...
            }
    }
}

}

似乎选项中的 this.stacked 与组件中的 this.staked 无关。 所以我的问题是如何以正确的方式将 stateChange 与组件变量绑定？

Answer 1

// 添加#nvd3

@ViewChild(nvd3) nvd3 : NvD3Component; // <- update