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

问题描述

我正在尝试带有 angular 的 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 = {传奇: {位置:底部"},系列默认值:{类型:列"},系列: [{name: "总访问量",数据:$scope.oldReps}, {name: "独特的访客",数据:$scope.newReps}],值轴:{线: {可见:假}},工具提示:{可见:真实，格式:{0}"}};

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

$scope.chart = {刷新图表:函数(){$scope.rchart.refresh();},};

并在以下位置调用此方法:

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

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

解决方案

它没有很好的文档记录，但是要在从服务器返回数据后获取具有远程数据绑定的 UI 控件以进行更新需要两者 从 Angular 端观察集合的更新，并从 Kendo 端将数据对象重新绑定到其各自的 UI 控件.

在您的控制器中，使用$watchCollection观察数据对象的变化，并更新绑定到这些集合的对象/属性:

//API调用$http.get('...').success(function(data){$scope.data = 数据；});//KendoUI 配置对象$scope.chart = {数据源: {数据:$scope.data}};//注意 $scope.data 的变化$scope.$watchCollection('data', function(newData) {//使用更改更新数据绑定$scope.chart.dataSource.data = newData;});

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

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

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

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

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:

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

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

解决方案

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.

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

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:

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

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