angular2图表和事件

本文介绍了angular2图表和事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在我的angular2应用程序中使用zingchart，来了一个十字架这个问题。 我的数据为图表已经改变，我需要重新翻译图表，我只是不知道该怎么做？ 这是zing图表团队提供的我的重新渲染按钮的plunkr。我不知道如何重新绘制图表。 plnkr.co/edit/OjqvVPiyKBUJbKgcLi6A?p=preview

I am using zingchart in my angular2 application and came a cross this problem. My data for the chart have changed i need to rerender the chart and I just don't know how to do that? this is the plunkr that the zing chart team provided with my button of rerender. I don't know how to rerender the chart. plnkr.co/edit/OjqvVPiyKBUJbKgcLi6A?p=preview

import {bootstrap} from 'angular2/platform/browser'; import {Component, NgZone, AfterView, OnDestroy} from 'angular2/core' class Chart { id: String; data: Object; height: any; width: any; constructor(config: Object) { this.id = config['id']; this.data = config['data']; this.height = config['height'] || 300; this.width = config['width'] || 600; } } @Component({ selector : 'zingchart', inputs : ['chart'], template : ` <div id='{{chart.id}}'></div> ` }) class ZingChart implements AfterView, OnDestroy { chart : Chart; constructor(private zone:NgZone) { } ngAfterViewInit() { this.zone.runOutsideAngular(() => { zingchart.render({ id : this.chart['id'], data : this.chart['data'], width : this.chart['width'], height: this.chart['height'] }); }); } ngOnDestroy() { zingchart.exec(this.chart['id'], 'destroy'); } } //Root Component @Component({ selector: 'my-app', directives: [ZingChart] template: ` <zingchart *ngFor="#chartObj of charts" [chart]='chartObj'></zingchart> <button type="button" class="btn btn-default" (click)="rerender()">re-render</button> `, }) export class App { charts : Chart[]; constructor() { this.name = 'Angular2' this.charts = [{ id : 'chart-1', data : { type : 'line', series : [{ values :[2,3,4,5,3,3,2] }], }, height : 400, width : 600 }] } rerender(){ alert("please help me don't know what to write here"); } } bootstrap(App, []) .catch(err => console.error(err));

推荐答案

@ViewChild 装饰器：

@Component({ selector: 'my-app', directives: [ZingChart] template: ` <zingchart *ngFor="#chartObj of charts" [chart]='chartObj'></zingchart> <button type="button" class="btn btn-default" (click)="rerender()">re-render</button> `, }) export class App { charts : Chart[]; @ViewChild(ZingChart) chart: ZingChart; (...) }

将能够在图表组件本身上调用一个方法。例如，渲染一个：

This way you will be able to call a method on the chart component itself. A render one for example:

@Component({ (...) }) export class App { (...) rerender(){ this.chart.render(); } }

查看此plunkr：plnkr.co/edit/NggADnGRbw4TsYiIUsh3?p=preview

See this plunkr: plnkr.co/edit/NggADnGRbw4TsYiIUsh3?p=preview