angular - 刷新图表数据

Question

我刚开始使用 KendoUI for Angular。

我想做的是在单击按钮时刷新图 TableView 。 这是我的代码:

我的 html:

<kendo-chart [categoryAxis]="{ categories: categories }" (seriesClick)="onSeriesClick($event)">
    <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
    <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
    <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
    <kendo-chart-series>
        <kendo-chart-series-item *ngFor="let item of series" type="line" style="smooth" [data]="item.data" [name]="item.name">
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

我的组件:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  private series: any[] = [{
    name: "India",
    data: [3.907, 7.943, ...]
  },{
    name: "World",
    data: [1.988, 2.733, ...]
  }];
  private categories: number[] = [2002, 2003, ...];


    public onSeriesClick(e): void {
        this.series[0].data[0] = this.series[0].data[0] + 4;
        // TODO update the chart view
    }
}

如何引用 View 来更新它？ 非常感谢!

Answer 1

kendo-chart 将使用两天的数据绑定(bind)，因此如果您更新组件类中的任何内容，它将自动反射(reflect)在 View 中。 因此，如果您更新系列变量中的任何内容，它将自动反射(reflect)在图表中。

plnkr 将从图表中删除印度。 http://plnkr.co/edit/LdJOrU7oLOqB8e9RpNsc?p=preview

   onClickMe() {
     this.series = [ {
    name: "Russian Federation",
    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
  }, {
    name: "Germany",
    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
  },{
    name: "World",
    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
  }];
  }