剑道+角度图表数据

Question

我正在尝试使用角度的剑道图表,我有显示数据的问题,这是我的代码:

HTML:

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

使用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}"
         }
     };

问题是从服务器获取数据后图表没有更新,我尝试刷新这样的图表(但没有运气):

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

并调用此方法:

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

而且我也尝试$scope.chartOptions在同一个函数中定义,但没有.有没有什么办法解决这一问题 ？

Answer 1

它没有很好地记录,但是在从服务器返回数据之后获得具有远程数据绑定的UI控件以进行更新需要同时从Angular端观察集合以获取更新并将数据对象重新绑定到来自Kendo的相应UI控件侧.

在控制器中,使用$watchCollection并监视对数据对象的更改,并更新绑定到这些集合的对象/属性:

// 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;
});

在您的视图中,定义通过k-rebindAngular-Kendo指令进行更改时UI控件应绑定的对象:

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

以下是绑定到远程数据的图表示例:

http://codepen.io/micjamking/pen/4980a5e22cbd4de01264fadae5f25f06