Kendo + Angular Diagrammdaten

Question

Ich versuche, aus Kendo-Charts mit eckiger, und ich habe Probleme Anzeigen von Daten, hier ist mein 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}" 
     } 
    }; 

Das Problem ist Diagramm wird nicht aktualisiert, nachdem Daten vom Server abgerufen wurde, habe ich versucht, Diagramm wie folgt zu aktualisieren (aber ohne Glück):

$scope.chart = {   
     refreshChart : function() { 
      $scope.rchart.refresh(); 
     }, 
    }; 

Und Aufruf dieser Methode in:

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

Und ich habe auch versucht, $scope.chartOptions innerhalb derselben Funktion zu definieren, aber nichts. Gibt es eine Möglichkeit, das zu beheben?

Answer 1

Es ist nicht gut dokumentiert, aber eine UI-Steuerung mit Remote-Datenbindung zu aktualisieren, nachdem Daten von einem Server zurückgegeben wurden zu bekommen erfordert Sowohl beobachten Sie die Sammlung für Updates von der Angular-Seite und das Datenobjekt an die entsprechende UI-Steuerelement von der Kendo-Seite neu binden.

In Ihrem Controller, für Änderungen an der Datenobjekte sehen $watchCollection verwenden, und aktualisieren Sie die Objekte/Eigenschaften, die zu diesen Sammlungen gebunden sind:

// 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 Ihrem Ansicht, definieren Sie das Objekt Ihrer UI-Steuerelement sollte gebunden sein, wenn Änderungen vorgenommen werden über die k-rebind Angular-Kendo-Richtlinie:

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

Hier ist ein Beispiel eines Diagramms auf entfernte Daten gebunden:

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

Answer 2

Ich denke Ihr Problem ist, dass $ scope.chartOptions gesetzt ist, bevor die Daten des resultService abgerufen werden. Angular gibt in diesem Fall ein leeres Array zurück und füllt die Daten später aus. Aber $ scope.chartOptions nicht mit neuen Daten aktualisiert.

Sie könnten versuchen, mit

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

So werden chartOptions aktualisiert, wenn oldReps oder newReps geändert haben.

Ich hatte ein ähnliches Problem und $ watchCollection rettete mein Tag (Caching data and updating another object for an chart does not work)

Answer 3

Die Verwendung von $ watchCollection zu verfolgen und die dataSource.data in der akzeptierten Antwort und anderen zuweisen ist ein unnötig verworren Ansatz.

Hier ist eine einfache Implementierung:

Ansicht:

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

Controller:

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

die dataSource.data() -Methode anstelle des Zuweisens dataSource.data als Array ist das Schlüssel hier:

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 Demo: http://codepen.io/TaeKwonJoe/pen/WGOpEv