Угловые + диаграммы Google: ng-модель не обновляется

У меня есть простая диаграмма Google и встроена в Angular. Отображается диаграмма, подразумевает, что они могут привязывать данные от углового до googlechart. Однако проблема заключается в том, что если я редактирую значение в массиве (диаграмма источника данных), диаграмма не обновляется.Угловые + диаграммы Google: ng-модель не обновляется

Код:

<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: Значения первого массива редактируются через текстовое поле в HTML. Я уверен, что редактирование отражает, так как я вижу элемент span, отображающий обновленное значение. Как-то одно и то же значение не получает привязки к диаграмме.

Нужно ли снова загружать диаграмму, вызывая chart.draw (данные, параметры); Если да, то где я должен звонить?

Спасибо

источник

2016-07-01 Ramu

Как вы редактируете массив диаграмм? вручную или через какой-либо интерфейс на странице html? Похоже, вы делаете это вручную, потому что я не вижу способа изменить значение массива данных на странице. Но я попробовал ваш пример, вручную изменяя значения в вашем массиве диаграмм, и он работал нормально. Представление диаграммы изменилось в соответствии со значениями. Какой браузер вы используете? –

@codechat: раздел «Редактировать 1» моего вопроса должен помочь. Чтобы разработать, если вы запустите код в браузере, вы можете найти текстовое поле, которое связывается с значением первого элемента, являющимся источником данных диаграммы. Вы можете редактировать значение из текстового поля, и оно отражается в элементе span под текстовым полем. Так угловой работает. Но как-то его не обновлял график. – Ramu

Графики Google фактически не привязаны к данным. Под этим я подразумеваю, что диаграмма не перерисовывается при изменении данных. Вам нужно будет просмотреть значения и вызвать перерисовку самостоятельно или попробовать [Угловая диаграмма Google] (https://angular-google-chart.github.io/angular-google-chart/). – nbering

Похоже Google графики не выполняют два пути связывания данных по состоянию на сегодняшний день. Основываясь на предположении от @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>

источник

2016-07-02 15:44:23 Ramu

Угловые + диаграммы Google: ng-модель не обновляется

ответ

Смежные вопросы