Verwenden von ng-repeat zum Wiederholen von Google Chart-Diagrammen

Question

Ich bin gerade dabei, AngularJS zu lernen, also vergib mir, wenn ich etwas Dummes sage. Ich verwende Google Chart zum Erstellen meiner Diagramme.

Jedes Mal, wenn der Benutzer auf eine Schaltfläche klickt, zeigt meine Webseite ein weiteres Diagramm an. Also dachte ich über die Verwendung von ng-repeat nach, um sie anzuzeigen. Außerdem kann jede Grafik (und nicht angezeigt mehr) mit einer Taste (das img im folgenden Code) geschlossen:

<div class="chartContainer" ng-repeat="x in arrayDiv"> 
    <img src="close.png"/> 
</div> 

So erstellen Sie ein Diagramm ich so vorgehen:

var chart = new google.visualization.ChartWrapper({ 
    'chartType': chartType, 
    'containerId': //??? 
}); 

Also meine Frage ist: Wie erweitere ich $ scope.arrayDiv jedes Mal, wenn ein Diagramm erstellt wird? Und wie bekomme ich die ID des auf diese Weise erstellten div, um das Diagramm darauf zu beeinflussen?

Answer 1

Versuchen mit Winkel-google-chart,

Siehe: https://angular-google-chart.github.io/angular-google-chart/docs/latest/examples/bar/

<div class="chartContainer" ng-repeat="data in arrayDiv"> 
    <div layout-padding layout-margin google-chart chart="drawChart(x)">   
    </div> 
</div> 

$scope.drawChart = function (value) { 

    $scope.chartData = []; 
    var chartValue = { 
     c: [{ 
      v: 'subject 
     }, { 
      v: 5, 
      f: " questions" 
     }, { 
      v: 6, 
      f: " questions" 
     }] 

    }; 
    $scope.chartData.push(chartValue); 
    $scope.qaChart = {}; 
    $scope.qaChart.type = "BarChart"; 
    $scope.qaChart.data = { 
     "cols": [{ 
      id: "Sections", 
      label: "Subject", 
      type: "string" 
     }, { 
      id: "Correct", 
      label: "Correct", 
      type: "number" 
     }, { 
      id: "Wrong", 
      label: "Wrong", 
      type: "number" 
     }], 
     "rows": $scope.chartData 
    }; 
    $scope.qaChart.options = { 

     "isStacked": "true", 
     "fill": 20, 
     "displayExactValues": true, 
     "colors": ['#4CAF50', '#EF5350', '#00adee'], 
     "vAxis": { 
      "title": " Questions",     
     }, 
     "hAxis": { 
      "title": "Details", 
     } 
    }; 
    return $scope.qaChart; 
};