jquery - highchart 的隐藏图表在 Angularjs 中从容器中呈现

Question

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

我读过有关如何使用 jquery 解决此问题的类似问题:( one 、 two 、 three )

我已经尝试过:

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

Here is a Plunker of the error

Note: Just make the view window large enough, so that when you press the button you can see, that the chart is on top of the div.

Answer 1

最好使用一种 Angular wrapper 来包装像https://github.com/pablojim/highcharts-ng这样的高库存。或者创建如下指令来达到目的

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

将数据绑定(bind)到 Controller 中的“图表”并创建指令，

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

希望有帮助。