当作为角度指令实现时，Highcharts跨越bootstrap列宽-Java 学习之路

我根据highcharts blog post实现了一个针对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并且工作正常 . 我感谢任何人都可以为我提供解决方案 .

enter image description here

以前的参考文献：

http://jsfiddle.net/csTzc/

Highcharts - issue about full chart width

highcharts not responsive after reflow

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

2 回答

我终于找到了答案，感谢发表评论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 .

谢谢 .

回复于 2024-05-10T05:37:22+08:00

2
一个简单的解决方案是增加位置：相对;和显示：块;到ng-chart元素 . 发生这种情况的原因是因为高图表元素基于其最接近的祖先和布局进行调整，并且ng-chart没有一个（检查它，它不会显示任何实际尺寸） . 此外，当范围被销毁时，您将需要取消绑定resize事件，尽管只要容器具有布局，您就不需要它 . 试试这个：
```
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);          
        }
    }
});
```
回复于 2024-05-10T05:37:22+08:00

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

2 回答

相关问题