angular2 图表和事件

Question

我在我的 angular2 应用程序中使用 zingchart，遇到了这个问题。我的图表数据已更改，我需要重新渲染图表，但我不知道该怎么做？这是 zing chart 团队为我的重新渲染按钮提供的 plunkr。我不知道如何重新渲染图表。 https://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));

Answer 1

我会使用 @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;

  (...)
}

这样您就可以调用图表组件本身的方法。例如渲染一个：

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

看到这个 plunkr：https://plnkr.co/edit/NggADnGRbw4TsYiIUsh3?p=preview

angular2 图表和事件

angular2 chart and events

events

charts

zingchart

angular