グラフのデータをリフレッシュ

Question

私はちょうどAngularのKendoUIを使い始めました。

私がやっていることは、ボタンをクリックするとチャートビューをリフレッシュすることです。 これは私のコードです：

私の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 
    } 
} 

は、どのように私はそれを更新するビューを参照することができますか？ ありがとう！

Answer 1

kendo-chartは2日間のデータバインディングを使用するので、コンポーネントクラス内のものを更新すると、自動的にビューに反映されます。 シリーズ変数の値を更新すると、自動的にグラフに反映されます。

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] 
    }]; 
    }