Aurelia + Kendo - 如何在更改數據後重新載入Kendo餅圖？

我正在嘗試使用Aurelia和Kendo UI Bridge在餅圖中顯示數據。由於項目需求，我已經在custom element中加載了餅圖小部件。如果我的數據在頁面加載之前可用，則一切正常。Aurelia + Kendo - 如何在更改數據後重新載入Kendo餅圖？

視圖模型

export class PieChartCustomElement { 
    chartData = []; 
    chartSeries = [{ 
     type: 'pie', 
     startAngle: 150, 
     field: 'percent', 
     categoryField: 'languageName' 
    }]; 
    // other variables 

    constructor() { 
     //if I hard-code the data here, all works fine 
     this.chartData = [ 
      { languageName: 'English', percent: 62.5 }, 
      { languageName: 'Spanish', percent: 35 }, 
      { languageName: 'Esperanto', percent: 2.5 } 
     ]; 
    } 
}

查看

<template> 
    <require from="aurelia-kendoui-bridge/chart/chart"></require> 
    <h4>pie chart custom element</h4> 
    <ak-chart k-title.bind="title" 
    k-legend.bind="legend" 
    k-series-defaults.bind="chartDefaults" 
    k-series.bind="chartSeries" 
    k-data-source.bind="chartData" 
    k-tooltip.bind="tooltip" 
    k-widget.bind="pieChart"></ak-chart> 
</template>

在現實中，我的數據是使用一個承諾一個REST API獲取的，所以我沒有數據時，頁面最初加載。此外，我需要將參數傳遞給通過元素上的@bindable屬性進入的REST API，因此我無法在構造函數中填充數據源。因此，這樣的事情：

@bindable({ defaultBindingMode: bindingMode.oneWay }) someArg; 

attached() { 
    // 'api' is injected and is a simple JS class that calls the REST API 
    this.api.getChartData(this.someArg).then((results) => { 
     this.chartData = results; 
    }); 
}

我敢肯定，這是由於餅圖部件已加載並在其後臺數據變化不會自動加載的事實。如果實際情況如此，當我更改其數據集時，如何重新加載餅圖？如果不是，我做錯了什麼？

Working Gist - 在構造函數中註釋/取消註釋代碼/激活事件，以查看行爲。

來源

2017-08-31 AJ.

我相信你正在尋找的方法是setDataSource()

在pie-chart.js在你Gist嘗試改變

this.chartData = languageData;

到

this.pieChart.setDataSource(this.chartData);

的 attached()方法

來源

2017-08-31 21:42:04 VanBilt

Aurelia + Kendo - 如何在更改數據後重新載入Kendo餅圖？

回答

相關問題