2016-07-01 17 views
2

私は単純なGoogleグラフを持ち、Angularを埋め込んでいます。グラフが表示され、角度からgooglechartにデータをバインドできます。しかし、問題は、配列(チャートのデータソース)の値を編集しても、グラフが更新されないということです。角度+ Googleグラフ:モデルが更新されていません

コード:

<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> 

編集1:最初の配列の 値は、HTMLのテキストボックスで編集されています。私はスパン要素が更新された値を表示するのを見ることができるので、編集が反映されていることを確かめてください。どういうわけか、同じ値がグラフにバインドされていません。

chart.draw(data、options)を呼び出してグラフを再度読み込む必要がありますか。はいの場合は、どこに電話する必要がありますか?

は、Googleのチャートは、今日のよう結合任意の二つの方法でデータを実行しないように

+0

グラフ配列をどのように編集していますか?手動またはhtmlページ上のいくつかのインターフェイスを介して?私はページ上のデータ配列の値を変更する方法が見えないので、手動でやっているようです。しかし、私はあなたの例をあなたのチャートアレイの値を手動で変更してみました。うまくいきました。値によってチャートの表示が変わりました。どのブラウザを使用していますか? –

+0

@codechat:私の質問の「編集1」セクションが役立ちます。具体的には、ブラウザでコードを実行すると、チャートのデータソースである最初の要素の値にバインドするテキストボックスが見つかります。テキストボックスから値を編集することができ、それはテキストボックスの下のスパン項目に反映されます。だから角度が働いている。しかし、何とかチャートを更新していない。 – Ramu

+1

Googleのグラフは実際にはデータに「バインド」しません。これによって、データが変更されたときにグラフが再描画されないことを意味します。値を見て自分で描画し直すか、[Angular Google Chart](https://angular-google-chart.github.io/angular-google-chart/)を試してみる必要があります。 – nbering

答えて

0

はそうありがとうございます。 @ nberingからの提案に基づいて、私は関数の外の値を更新し、グラフを再ロードしました。今それはすべて良いと思われる。そのシンプルだが、参考のためだけに、編集されたコードがあります。

<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> 
関連する問題