Kendo 图表未在 AngularJS 中加载

Question

我同时使用 Kendo 和 Angular。我正在使用 Kendo 图表来显示从数据库中获取的一些数据。我有一个简单的服务，使用 Angular $resource 从存储中获取数据。它看起来像这样：

app.factory('statsData', function ($resource) {
    var Stats= $resource('myadress/stats/:id', { id: '@id' });

    return {
        get: function (id) {
            return Stats.get({ id: id});
        }
    }
});

因此，如果我执行此操作，我将得到一个如下所示的对象数组：

[
    {
        "name": "Books",
        "amount": 200
    },
    {
        "name": "Newspapers",
        "amount": 320
    },
    {
        "name": "Magazines",
        "amount": 225
    },
    {
        "name": "Shoes",
        "amount": 400
    }
]

我的 Angular 控制器中有一个变量，用于存储从服务获取函数的结果。

$scope.chartData = statsData.get(someId);

我在 HTML 中这样声明了我的 Kendo 图表：

<div kendo-chart
    k-series="[{ field: 'amount', categoryField: 'name'}]"
    k-data-source="chartData">
</div>

所以，我应该得到的结果真的是这样的：

问题是，当我运行应用程序时，没有任何反应。此外，如果我将 $scope.chartsData 变量的值更改为静态定义的对象数组，如下所示：

$scope.chartData = [ { "name": "Books", "amount": 200 },..];

一切正常，图表显示正确。因此，我的假设是问题与加载图表本身时数据仍未从服务返回这一事实有关。我该如何解决这个问题？

Answer 1

好的，我找到了解决方案here。我刚刚在 HTML 中的 Kendo 图表中添加了一个 k-rebind 指令，这样我就可以确保在进行更改时正确绑定它。

所以，改变这个：

<div kendo-chart
    k-series="[{ field: 'amount', categoryField: 'name'}]"
    k-data-source="chartData">
</div>

为此：

<div kendo-chart
    k-series="[{ field: 'amount', categoryField: 'name'}]"
    k-data-source="chartData"
    k-rebind="chartData">
</div>

问题是最初我通过我的服务提供的数据源中没有数据。当我从服务器获得响应时，图表已经绑定，这就是我需要添加 k-rebind 指令的原因。就这么简单:)

Answer 2

另一个备注：

你为什么不尝试在控制器中设置承诺解决方案？像这样的东西（为了避免进一步的问题，至少是我第一眼不喜欢的东西）

在控制器中：

 statsData.get(someId).then(function(dataRecieved) {
       $scope.chartData = dataRecieved; 
 }, function(data) {
   throw new Error("something went wrong");
 });

自从你们工厂你return一个承诺

app.factory('statsData', function ($resource) {
var Stats= $resource('myadress/stats/:id', { id: '@id' });

return {
    get: function (id) {
        return Stats.get({ id: id}); // here you return the promise, 
                                    //it will resorved in controller.
    }
 }
});

Kendo 图表未在 AngularJS 中加载

Kendo Chart is not loading in AngularJS

kendo-ui

angularjs

angularjs-service

angularjs-resource

kendo-chart