Google Chart - Container ist nicht definiert

Question

Ich weiß, dass diese Frage bereits gestellt wurde, aber ich konnte nicht viele nützliche Antworten finden. mein Diagramm Vor zeichnen, schaffe ich das div, dass es halten wird:

var newDiv = document.createElement('div'); 
newDiv.id = ... 
newDiv.class = ... 
... 

ich es dann in einem Array schieben, die mit AngularJS über ng-Repeat angezeigt wird:

$scope.arrayDiv.push(newDiv); 

Dann mache ich die ChartWrapper:

var chart = new google.visualization.ChartWrapper({ 
    'chartType': chartType, 
    'containerId': $scope.arrayDiv[i].id, 
    .... 
}); 

ich schaffe das Datatable (und füllen sie ihn, aber das ist nicht Teil der Ausgabe).

var data = new google.visualization.DataTable(); 

Und schließlich, ich ziehe sie (oder zumindest versuchen):

chart.setDataTable(data); 
chart.draw(); 

Wie Sie es erraten, das ist, wo ich den Fehler Container is not defined erhalten.

Ich habe versucht, dies zu überprüfen: console.log($scope.arrayDiv[i].id), und ich bekomme die erwartete ID.

Von dem, was ich von anderen Fragen (Google Charts ColumnChart won't render because "Container is not defined") verstanden habe, stammt das Problem von der Reihenfolge der Ausführung des Codes. Ich möchte jedoch mein Diagramm nur vorbereiten und zeichnen, wenn der Benutzer auf eine Schaltfläche klickt. Wie organisiere ich meinen Code, um dieses Problem zu lösen?

Answer 1

Dies passiert, weil newDiv nicht an das DOM überall hinzugefügt wird. Sie müssten so etwas tun:

var currentDiv = document.getElementById("div1"); 
document.body.insertBefore(newDiv, currentDiv);