Kendo 角图数据

Question

我正在尝试使用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 = {
         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控件，以更新数据后，从服务器返回了数据，需要观看收藏集从角侧进行更新，并将数据对象重新固定到其各自的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;
});

在您的 view 中，定义对象您的UI控件应绑定到通过k-rebind Angular-Kendo指令进行更改时的束缚：

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

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

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

Answer 2

使用$ 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/taekwonjoe/pen/wgopev

Answer 3

我认为您的问题是$范围。在这种情况下，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保存了我的一天（缓存数据并更新图表的另一个对象不起作用）