剑道+角图表数据 [英] Kendo + Angular chart data

问题描述

我想了剑道图表具有角，我有显示数据的问题，这是我的code：

I'm trying out Kendo charts with angular, and I have problem displaying data, here is my code:

HTML

<div  kendo-chart="rchart" data-k-options="chartOptions" data-role="chart" class="k-chart" style="position: relative;"></div>

使用Javascript：

Javascript:

resultService.getResult().then(function (resultResponse) {
         $scope.data = resultResponse.data;
         $scope.oldReps = _.pluck($scope.data.TreningScores.Item1, 'Item2');
         $scope.newReps = _.pluck($scope.data.TreningScores.Item2, 'Item2');
         $scope.categories = _.pluck($scope.data.TreningScores.Item1, 'Item1');
     });


$scope.chartOptions = {

         legend: {
             position: "bottom"
         },
         seriesDefaults: {
             type: "column"
         },
         series: [{
             name: "Total Visits",
             data: $scope.oldReps
         }, {
             name: "Unique visitors",
             data: $scope.newReps
         }],
         valueAxis: {
             line: {
                 visible: false
             }
         },

         tooltip: {
             visible: true,
             format: "{0}"
         }
     };

问题是图表数据未更新从服务器获取，我已经试过刷新图表所示（但没有运气）：

The problem is chart isn't updated after data is fetched from server, I've tried refreshing chart like this (but with no luck):

$scope.chart = {        
        refreshChart : function() {
            $scope.rchart.refresh();
        },
    };

而在调用此方法：

And calling this method in:

resultService.getResult().then(function (resultResponse) {});

和我也试着定义 $ scope.chartOptions 相同的功能，但里面什么也没有。有什么办法解决这一问题？

And I've also tried to define $scope.chartOptions inside same function, but nothing. Is there any way to fix this ?

推荐答案

这不是有据可查的，但要获得与远程数据绑定后的数据已经从服务器返回来更新UI控件需要的两个看着收集从侧面角度的更新和重新绑定数据对象从侧面剑道其各自的UI控件。

It's not well documented, but to get a UI control with remote data-binding to update after data has been returned from a server requires both watching the collection for updates from the Angular side and rebinding the data object to its respective UI control from the Kendo side.

在您的控制器，注意使用 $ watchCollection 更改您的数据对象，并更新这必将对这些集合的对象/属性

In your controller, watch for changes to your data objects using $watchCollection, and update the objects/properties which are bound to those collections:

// API call
$http.get('...').success(function(data){
   $scope.data = data;
});

// KendoUI config object
$scope.chart = {
    dataSource: {
        data: $scope.data
    }
};

// Watch for changes to $scope.data
$scope.$watchCollection('data', function(newData) {

    // Update data bindings with changes
    $scope.chart.dataSource.data = newData;
});

在您的视图后，定义对象的UI控件应绑定更改时，通过 K-重新绑定角剑道指令作出

In your view, define the object your UI control should be bound to when changes are made via the k-rebind Angular-Kendo directive:

<div kendo-chart k-options="chart" k-rebind="chart"></div>

下面是绑定​​到远程数据的图表的一个示例：

Here is an example of a chart bound to remote data:

<一个href=\"http://$c$cpen.io/micjamking/pen/4980a5e22cbd4de01264fadae5f25f06\">http://$c$cpen.io/micjamking/pen/4980a5e22cbd4de01264fadae5f25f06

这篇关于剑道+角图表数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！