2

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));
4

1 に答える 1

5

@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;

  (...)
}

このようにして、チャート コンポーネント自体でメソッドを呼び出すことができます。たとえば、レンダリング 1:

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

この plunkr を参照してください: https://plnkr.co/edit/NggADnGRbw4TsYiIUsh3?p=preview

于 2016-05-19T09:26:37.417 に答える