Angular + Google-Diagramme: ng-Modell nicht aktualisiert

Ich habe ein einfaches Google-Diagramm und eingebettet mit Angular. Das Diagramm wird angezeigt, was bedeutet, dass Daten von angular an Google Chart gebunden werden können. Allerdings ist das Problem, wenn ich einen Wert im Array bearbeiten (Diagramm Datenquelle) Diagramm wird nicht aktualisiert.Angular + Google-Diagramme: ng-Modell nicht aktualisiert

Code:

<html> 
<head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script> 

    <script type="text/javascript"> 
     var myApp = angular.module("myApp", []); 
     myApp.controller("myCnt", function ($scope) { 
      $scope.dataArray = [ 
       ['Mushrooms', 3], 
       ['Onions', 1], 
       ['Olives', 1], 
       ['Zucchini', 1], 
       ['Pepperoni', 2] 
      ]; 

      google.charts.load('current', { packages: ['corechart'] }); 
      google.charts.setOnLoadCallback(drawChart); 

      function drawChart() { 
       var data = new google.visualization.DataTable(); 
       data.addColumn('string', 'Topping'); 
       data.addColumn('number', 'Slices'); 
       data.addRows($scope.dataArray); 

       // Set chart options 
       var options = { 
        'title': 'How Much Pizza I Ate Last Night', 
        'width': 400, 
        'height': 300 
       }; 

       // Instantiate and draw our chart, passing in some options. 
       var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
       chart.draw(data, options); 
      } 
     }); 
    </script> 
</head> 

<body ng-app="myApp" ng-controller="myCnt"> 
    <input type="text" ng-model="dataArray[0][1]" /><br /> 
    <span ng-bind="dataArray[0][1]"></span> 
    <div id="chart_div"></div> 
</body> 
</html>

Edit 1: Werte von ersten Arrays werden durch ein Textfeld in HTML bearbeitet. Ich bin sicher, dass die Bearbeitung spiegelt, wie ich das Span-Element sehen kann, das aktualisierten Wert anzeigt. Irgendwie wird derselbe Wert nicht an das Diagramm gebunden.

Muss ich das Diagramm erneut laden, indem ich chart.draw (Daten, Optionen) aufruft; Wenn ja, wo soll ich anrufen?

Danke

Quelle

2016-07-01 Ramu

Wie bearbeiten Sie dieses Diagramm-Array? manuell oder über eine Schnittstelle auf der HTML-Seite? Sieht so aus, als ob Sie es manuell tun, weil ich keine Möglichkeit sehe, den Wert von Datenfeldern auf der Seite zu ändern. Aber ich habe Ihr Beispiel versucht, indem Sie die Werte in Ihrem Charts-Array manuell geändert haben, und es hat gut funktioniert. Die Diagrammdarstellung änderte sich entsprechend den Werten. Welchen Browser benutzen Sie? –

@codechat: "Edit 1" Abschnitt meiner Frage sollte helfen. Wenn Sie den Code im Browser ausführen, können Sie ein Textfeld finden, das an den Wert des ersten Elements bindet, der die Datenquelle des Diagramms darstellt. Sie können den Wert aus dem Textfeld bearbeiten, und er wird im Textfeld unter dem Textfeld angezeigt. So kantig funktioniert. Aber irgendwie aktualisiert es das Diagramm nicht. – Ramu

Google-Diagramme binden nicht wirklich an die Daten. Damit meine ich, dass das Diagramm nicht neu gezeichnet wird, wenn sich die Daten ändern. Sie müssen sich die Werte ansehen und eine Neuzeichnung selbst auslösen oder [Angular Google Chart] (https://angular-google-chart.github.io/angular-google-chart/) ausprobieren. – nbering

Scheint wie Google Charts führen keine zwei Daten Art und Weise ab heute verbindlich. Basierend auf dem Vorschlag von @nbering habe ich den Wert außerhalb der Funktion aktualisiert und das Diagramm neu geladen. Jetzt scheint alles gut zu sein. Es ist ziemlich einfach, aber nur als Referenz, unten ist der bearbeitete Code.

<html> 
<head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 

     google.charts.load('current', { packages: ['corechart'] }); 

     function display(val) { 
      google.charts.setOnLoadCallback(Mydisplay); 
     } 

     function Mydisplay() { 
      var LocalarData = [ 
      ['Mushrooms', 3], 
      ['Onions', 3], 
      ['Olives', 3], 
      ['Zucchini', 3.5], 
      ['Pepperoni', 3.5] 
      ]; 

      LocalarData[2][1] = +document.getElementById('Txt1').value; 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Topping'); 
      data.addColumn('number', 'Slices'); 
      data.addRows(LocalarData); 

      var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
      chart.draw(data, LocalarData); 
     } 
    </script> 
</head> 
<body> 
    <div id="chart_div"></div> 
    <input type="text" onkeyup="display()" id="Txt1" /> 
</body> 
</html>

Quelle

2016-07-02 15:44:23 Ramu

Angular + Google-Diagramme: ng-Modell nicht aktualisiert

Antwort

Verwandte Themen