5

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

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在同一个函数内部定义，但没有。有没有什么办法解决这一问题 ？

4

3 回答 3

11

它没有很好的文档记录，但是要在从服务器返回数据后更新具有远程数据绑定的 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-rebind中，定义当通过Angular-Kendo 指令进行更改时您的 UI 控件应绑定到的对象：

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

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

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

于 2014-04-30T05:28:56.173 回答
1

使用 $watchCollection 来跟踪和分配已接受答案和其他答案中的 dataSource.data 是一种不必要的复杂方法。

这是一个简单的实现：

看法：

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

控制器：

$scope.chart = {
  dataSource: new kendo.data.DataSource({
    data: [{ title: "Loading", value: 100, color: '#EFEFEF' }]
  }),
  series: [{ field: 'value', categoryField: 'title', padding: 0, holeSize: 25 }],
  seriesDefaults: { type: 'donut', startAngle: 90 }
};

使用 dataSource.data() 方法而不是将 dataSource.data 分配为数组是这里的关键：

payrollService.load(userId).then(function (result) {
  $scope.chart.dataSource.data(result.items); //where result.items is an array like so:
  //[
  //  { title: "Net Pay", value: 60, color: '#6BAE4B' },
  //  { title: "Taxes", value: 15, color: '#ED6347' },
  //  { title: "Deductions", value: 25, color: '#8161C2' }
  //]
});

Codepen 演示： http ://codepen.io/TaeKwonJ​​oe/pen/WGOpEv

于 2016-09-28T06:19:11.757 回答
0

我认为您的问题是 $scope.chartOptions 在检索 resultService 的数据之前设置。在这种情况下，Angular 将返回一个空数组并稍后填充数据。但是 $scope.chartOptions 没有用新数据更新。

你可以试试

$scope.$watchCollection('oldReps', function(newData, oldData) {
  $scope.chartOptions.series[0].data = newData;
});
$scope.$watchCollection('newReps', function(newData, oldData) {
  $scope.chartOptions.series[1].data = newData;
});

因此，如果 oldReps 或 newReps 已更改，则会更新 chartOptions。

我遇到了类似的问题，$watchCollection 挽救了我的一天（缓存数据和更新图表的另一个对象不起作用）

于 2014-02-02T19:21:17.107 回答