angular2图表和事件 [英] angular2 chart and events

问题描述

我在我的angular2应用程序中使用zingchart，来了一个十字架这个问题。
我的数据为图表已经改变，我需要重新翻译图表，我只是不知道该怎么做？
这是zing图表团队提供的我的重新渲染按钮的plunkr。我不知道如何重新绘制图表。
https://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. 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));

推荐答案

@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：https://plnkr.co/edit/NggADnGRbw4TsYiIUsh3?p=preview

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

这篇关于angular2图表和事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！