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-rebind Angular-Kendo指令进行更改时UI控件应绑定的对象：

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

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

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

Answer 2

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

这是一个简单的实现：

视图：

<input type="text" id="datepicker" runat="server" ClientIDMode="Static">

控制器：

<input type="text" id="MainContent_datepicker" name="ctl00$MainContent$datepicker">

使用dataSource.data（）方法而不是将dataSource.data指定为数组是关键：

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

Codepen演示： http://codepen.io/TaeKwonJoe/pen/WGOpEv

Answer 3

我认为您的问题是在检索resultService的数据之前设置了$ scope.chartOptions。在这种情况下，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节省了我的一天（Caching data and updating another object for an chart does not work）

剑道+角度图表数据

3 个答案: