当作为 angular 指令实现时，Highcharts 跨越 bootstrap 列宽

Question

实现了 highcharts 的 angular 指令如下

angular.module('highCharts')
    .directive('ngChart', function () {
        return {
            restrict: 'E',
            template: '<div></div>',
            scope: {
                options: '='
            },
            link: function (scope, element) {
                var chart = new Highcharts.chart(element[0], scope.options);
                $(window).resize(function () {
                    chart.reflow();
                });
            }
        }
    })

我在 html

中按如下方式使用此指令

    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div style="width:100%">
                    <ng-chart options="highchartsNG1"></ng-chart>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div style="width:100%">
                    <ng-chart options="highchartsNG2"></ng-chart>
                </div>
            </div>
        </div>
    </div>

options 属性为指令提供一个 highcharts 配置对象。

我的问题是，当此指令在 html 中呈现时，它不服从它所在的 bootstrap 网格。呈现图表时，它们扩展到可见区域之外window如下，一张图重叠。简而言之，图表没有响应。我在互联网上搜索并尝试将容器的宽度设置为 100%，如 html，并添加了一个 window 调整大小事件处理程序。但其中 none 有效。我试过 jquery 并且它工作正常。我很感激任何人都可以为此提供解决方案。

以前的参考文献：

http://jsfiddle.net/csTzc/

Highcharts - issue about full chart width

highcharts not responsive after reflow

http://www.angulartutorial.net/2014/03/responsive-highchart.html

Answer 1

感谢 here 发表的评论，我终于找到了答案。魔术是在 ngChart angular 指令定义中添加 replace:true 如下：

angular.module('highCharts')
.directive('ngChart', function () {
    return {
        restrict: 'E',
        template: '<div class="chart-container"><div></div></div>',
        replace: true,
        scope: {
            options: '='
        },
        link: function (scope, element) {
            var chart = new Highcharts.chart(element[0], scope.options);
            $(window).resize(function () {
                chart.reflow();
            });
        }
    }
});

添加 replace:true 后，给定模板 html 将替换为 highcharts 内容。请查看此答案了解更多 details.

谢谢。

Answer 2

一个简单的解决方案是添加 position: relative;并显示：块；到 ng-chart 元素。发生这种情况的原因是因为 high 图表元素正在根据其最近的具有布局的祖先调整大小，而 ng-chart 没有（检查它，它不会显示任何实际尺寸）。此外，当范围被销毁时，您将需要取消绑定该调整大小事件，尽管只要容器具有布局，您就不会真正需要它。试试这个：

angular.module('highCharts')
.directive('ngChart', function () {
    return {
        restrict: 'E',
        scope: {
            options: '='
        },
        link: function (scope, element) {
            element.css({display: 'block', position: 'relative'}); //do this in actual css, this is just for demonstration
            new Highcharts.chart(element[0], scope.options);          
        }
    }
});

Answer 3

highchart数据绑定前添加Element.css，添加position: relative;和display: block;

.directive("pieChart", function(){

    return {
        restrict: "E",
        template: "<div></div>",
        scope:{
            title: "@",
            data: "=",
        },
        link: function(scope, element){
            element.css({display: 'block', position: 'relative'});
                        Highcharts.chart(element[0], {
             chart: {
                                            type: 'pie'
                    },
             title: {
                                            text: scope.title
                    },
             plotOptions: {
                                        pie: {
                      allowPointSelect: true,
                      cursor: 'pointer',
                      dataLabels: {
                                                enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.2f} %'
                      }
                     }
                   },
              series: [{
                                data: scope.data,
                                name:"Percentage",
              }]
            });         
        }
    };
})

当作为 angular 指令实现时，Highcharts 跨越 bootstrap 列宽

Highcharts spans beyond bootstrap column width when implemented as an angular directive

highcharts

angularjs

angularjs-directive

highcharts-ng