高图的隐藏图表在Angularjs中呈现出容器

Question

我正在尝试创建一个完整的响应式高图的饼图，其角度位于隐藏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>

将数据绑定到＆＃39;图表＆＃39;在控制器中创建指令

.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]
                            ]
                        ]
                    }
                }]
            });
            }
          })
        }
      }
    })

希望有所帮助。