问角+谷歌图表:ng-模型不更新
EN

Stack Overflow用户

提问于 2016-07-01 14:58:55

回答 1查看 1.3K关注 0票数 2

我有一个简单的谷歌图表和嵌入角。图表被显示，暗示我能够将数据从角度绑定到googlechart。但是问题是，如果我编辑数组中的值(图表数据源)，图表就不会更新。

代码：

<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中的文本框编辑的。我确信编辑是反射的，因为我可以看到span元素显示更新的值。不知何故，同样的值并没有绑定到图表中。

我是否需要通过调用chart.draw(数据、选项)再次加载图表；如果是，那么我应该在哪里调用？

谢谢

angularjs

google-visualization

回答 1

Stack Overflow用户

发布于 2016-07-02 15:44:23

从今天起，谷歌图表似乎不会执行任何双向数据绑定。根据@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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38148536

复制

相似问题

问角+谷歌图表:ng-模型不更新
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角+谷歌图表:ng-模型不更新EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角+谷歌图表:ng-模型不更新
EN