Диаграмма Кендо не загружается в AngularJS

Я использую Kendo и Angular вместе. Я использую диаграммы кендо для отображения некоторых данных, полученных из базы данных. У меня есть простой сервис, использующий 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, в которой хранится результат функции get из службы.

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

Я объявил свою диаграмму кендо в HTML следующим образом:

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

Итак, результат, который я должен получить, будет выглядеть так:

введите здесь описание изображения

Проблема в том, что когда я запускаю приложение, ничего не происходит. Более того, если я изменю значение переменной $scope.chartsData на статически определенный массив таких объектов:

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

все работает правильно и график отображается правильно. Итак, мое предположение, что проблема связана с тем, что в момент загрузки самого графика данные еще не возвращаются из сервиса. Как я могу это исправить?


angularjs kendo-ui kendo-chart angularjs-service angularjs-resource
person Yulian    schedule 26.10.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Хорошо, я нашел решение здесь. Я только что добавил директиву k-rebind в свою диаграмму кендо в HTML, чтобы убедиться, что она правильно привязана при внесении изменений.

Итак, измените это:

<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. Просто как тот :)

person Yulian    schedule 26.10.2015
comment
Примечание: следует помнить, что этот параметр уничтожит исходный виджет и создаст его заново с использованием измененных параметров, как указано в документации: docs.telerik.com/kendo-ui/AngularJS/ - person timtos; 26.10.2015
comment
У меня есть лучший вариант? - person Yulian; 26.10.2015

arrow_upward
1
arrow_downward

Еще одно замечание:

Почему бы вам не попробовать установить разрешение промиса в контроллере? что-то вроде этого (чтобы избежать дальнейших проблем, по крайней мере, это то, что мне не нравится с первого взгляда)

в контроллере:

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

Поскольку ваша фабрика возвращает обещание

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.
    }
 }
});
person JoSeTe4ever    schedule 26.10.2015