如何更新google chart？

Question

我是新来的angularjsgooglecharts，在工作中学习。我在我的控制器里有下面的代码，最初渲染piechart，没有任何问题。

有一个滑块指令，当改变时（基本上是一个日期范围滑块），应该用新的数据更新列图。但我不知道如何更新饼图数据。不过我从后台获取新数据时没有任何问题。

下面是控制器中的初始化代码。

                $scope.piechart = {};
                $scope.piechart.type ='PieChart';                   
                piechartData = response.data.piechart;
                var piechartoptions = {
                    'min-width':800,
                    'max-width':320,
                    'is3D':true,
                    'pieSliceText': 'label',
                    'pieSliceTextStyle': {fontSize: 10},
                    'chartArea' : { left: 30, top: 60 },
                    'backgroundColor': {fill:'transparent'},
                    'legend': {'textStyle':{'color': 'white',
                                            'fontSize': 12},
                               'position': "top",
                               'maxLines':10,
                               'alignment':"start"},
                    'height':500
                };

         $scope.piechart.data = new google.visualization.DataTable(piechartData);
         $scope.piechart.options = piechartoptions;
         $scope.piechart.formatters = {};

在指令中(在上面控制器的scope所在的html中使用), 我对图表的访问如下:

scope.$parent.piechart

所以我很天真地做了这个，但没有用。

scope.$parent.piechart.data = new google.visualization.DataTable(response.data.piechart)

TIA的所有帮助。

Answer 1

要实现这一点，你需要在你的滑块模型上创建手表，所以当它被改变时，你需要更新你的饼图模型，所以它会自动更新。

观察

$scope.$watch('sliderModel',function(n,o) {
      // update your new pie chart data here, I think you need to update below model only
    $scope.piechart.data = new google.visualization.DataTable(piechartData);
}

这只是一个例子。你必须用新的数据更新它的饼图。

正确的Angular方式来使用谷歌图表

你应该使用google-chart指令来绘制饼图，这样这类问题就会自动解决。

请看这里- Angular-google-chart

Answer 2

我今天碰到了这个问题。一个简单的快速修复方法是简单地写下this.chartData = Object.assign([], this.chartData)，将暴露的数据集属性重新分配到你的组件中，这样它就会触发变化检测。

更多的信息来自于这个问题在不同的库：valor-softwareng2-charts#959(评论)

希望对疲惫的旅行者有所帮助:)