Aurelia + Kendo - 如何在更改数据后重新加载 Kendo 饼图？

Question

我正在尝试使用 Aurelia 和 Kendo UI Bridge to display data in a pie chart. Due to project requirements, I've got the pie chart widget loading in a custom element。如果我的数据在页面加载前可用，则一切正常。

查看模型

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 - constructor/activate 事件中的 Comment/uncomment 代码，用于查看行为。

Answer 1

我相信您正在寻找的方法是 setDataSource()

在 pie-chart.js 的 attached() 方法中 Gist 尝试更改

this.chartData = languageData;

至

this.pieChart.setDataSource(this.chartData);

Aurelia + Kendo - 如何在更改数据后重新加载 Kendo 饼图？

Aurelia + Kendo - How can I reload a Kendo pie chart after changing data?

kendo-ui

aurelia