Question

对angularjs / googlecharts不熟悉并在工作中学习。我在我的控制器中有以下代码，它最初呈现了饼图并且没有任何问题。

有一个滑块指令，当更改时（基本上是日期范围滑块），应该使用新数据更新柱状图。但我不知道如何更新饼图数据。我确实从后端获得了新数据，但没有任何问题。

这是控制器中的初始化代码：

                $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 = {};

在指令（在上面控制器的作用域所在的html中使用）中，我可以访问如下图表：

scope.$parent.piechart

因此我以非常天真的方式做到了这一点，但无济于事：

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

TIA提供所有帮助。

Answer 1

我今天碰到了这个问题。一个简单的快速解决方法是简单地编写 this.chartData = Object.assign（[]，this.chartData）可以将公开的数据集属性重新分配到您的组件中，从而触发更改检测。

有关此问题的其他库中的更多信息： valor-software / ng2-charts＃959（评论）

希望这可以帮助疲倦的旅行者：）

Answer 2

要实现这一点，您需要在滑块模型上创建监视，以便在更改时需要更新饼图模型，以便它自动更新。

<强>观看

$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);
}

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

使用谷歌图表的正确角度方式

您应该使用google-chart指令绘制饼图，以便自动解决此类问题。

看看这里 - Angular-google-chart

如何更新谷歌图表？

2 个答案: