Highcharts выходит за пределы ширины столбца начальной загрузки, если реализована как угловая директива

Я реализовал угловую директиву для highcharts следующим образом в соответствии с этим highcharts сообщение в блоге:

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, она не подчиняется сетке начальной загрузки, в которую она включена. Когда диаграммы отображаются, они расширяются за пределы видимой области окна следующим образом, и одна диаграмма перекрывает другую. Просто диаграммы не реагируют. Я поискал в Интернете и попытался установить ширину контейнера на 100%, как в html, а также добавил обработчик событий изменения размера окна. Но ничего из этого не работает. Я пробовал использовать jquery, и он отлично работает. Я ценю, что любой может предоставить мне решение для этого.

введите описание изображения здесь

Предыдущие ссылки:

http://jsfiddle.net/csTzc/

Highcharts - проблема с полной шириной диаграммы

highcharts не реагируют после перекомпоновки

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


angularjs highcharts angularjs-directive highcharts-ng
person Deepal    schedule 23.05.2016    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Я наконец нашел ответ благодаря комментарию, размещенному здесь < / а>. Волшебный трюк заключался в том, чтобы добавить replace:true в ngChart определение директивы angular следующим образом:

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. См. Этот ответ для получения дополнительных подробностей.

Спасибо.

person Deepal    schedule 05.06.2016

arrow_upward
2
arrow_downward

Простым решением было бы добавить position: relative; и дисплей: блок; к элементу ng-chart. Причина, по которой это происходит, заключается в том, что размер элемента high диаграммы изменяется в зависимости от его ближайшего предка с макетом, а у ng-диаграммы его нет (проверьте его, он не покажет никаких реальных размеров). Кроме того, вам нужно будет отменить привязку этого события изменения размера, когда область видимости будет уничтожена, хотя вам это действительно не понадобится, пока у контейнера есть макет. Попробуй это:

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);          
        }
    }
});
person Ben March    schedule 16.11.2016

arrow_upward
0
arrow_downward

Добавьте Element.css перед привязкой данных highchart, добавьте 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",
              }]
            });         
        }
    };
})
person upendra yadav    schedule 30.01.2019