Kendo+角度图数据

一尘不染

Kendo+角度图数据

angularjs

我正在尝试使用角度的Kendo图表，但在显示数据时遇到问题，这是我的代码：

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相同的函数，但是什么也没定义。有没有什么办法解决这一问题？

阅读 233

2020-07-04

共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

2020-07-04