highchart的隐藏图表在Angularjs中渲染出容器

Question

我正在尝试创建一个完整的响应式 highchart 饼图，该饼图位于一个用ng-show 隐藏的 div 内。

我已经阅读过有关如何使用 jquery 解决此问题的类似问题：（one、two、three）

我试过了：

1. $(window).resize() 但没用
2. $scope.$apply() 工作，但它一直抛出一个已经消化的循环错误
3. 我可以使用高图表的属性width : "string" 指定宽度，但图表不会响应并始终保持相同的宽度。

Here is a Plunker of the error

注意：只要把视图窗口足够大，这样当你按下按钮的时候，你就可以看到图表在div的顶部。

Answer 1

最好使用 https://github.com/pablojim/highcharts-ng 等高库存的角度包装器之一或创建如下指令来达到目的

<div high-chart id="chart" chartData="chart" style="height: 400px; min-width: 310px">
</div>

将数据绑定到控制器中的“图表”并创建指令，

.directive('highChart',function(){

      return{
        restrict:'A',
        scope:{
          chart:'=chartdata'
        },
        link:function(scope,element,attrs){
          scope.$watch('chart',function(newV){
            if(newV){
            $('#chart').highcharts('StockChart', {
                rangeSelector : {
                    inputEnabled: $('#chart').width() > 480,
                    selected : 1
                },

                title : {
                    text : 'AAPL Stock Price'
                },

                series : [{
                    type : 'scatter',
                    name : 'AAPL Stock Price',
                    data : newV,
                    dataGrouping : {
                        units : [
                            [
                                'week', // unit name
                                [1] // allowed multiples
                            ], [
                                'month',
                                [1, 2, 3, 4, 6]
                            ]
                        ]
                    }
                }]
            });
            }
          })
        }
      }
    })

希望对您有所帮助。