Question

我的问题听起来非常类似于here。

我在<div>内的.tab-pane中包含4个高位图。每个.highcharts-container略微过度扩展其父级的宽度。我试图将图表的宽度设置为100％，但截断了不理想的图表。

HTML

<div class="tab-pane maxHeight" id="show_graph">
    <div class="row maxHeight maxWide">
        <div class="bottomWrapperTable col-md-12 col-sm-12 col-lg-12 col-xs-12 noPadLeft noPadRight">
            <div class="row">
                <div id="graph_bar_month" class="graph col-lg-6 col-md-6 col-sm-6"></div>
                <div id="graph_bar_teamPercent" class="graph col-lg-6 col-md-6 col-sm-6"></div>
                <div id="graph_line_year" class="graph col-lg-6 col-md-6 col-sm-6"></div>
                <div id="graph_bar_teamActual" class="graph col-lg-6 col-md-6 col-sm-6"></div>
            </div>
        </div>
    </div>
</div>

与我链接的问题一样，此错误仅发生在页面加载上。例如，我可以调整页面大小并再次最大化它，它会很好。我试图调用reflow()方法来解决这个问题，如该问题的答案之一所述。（使用评论和此jsFiddle来创建它）

的jQuery

$('.nav-pills').on('click', function() {
   if($('#show_table').hasClass('active')) {
       $('.bottomWrapperTable').find('.graph').each(function() {
           $(this).highcharts().reflow();
       });
   }
});

此解决方案尚未解决。

任何帮助表示感谢。

Answer 1

padding: 0 !important .graph导致此错误。当我将CSS更改为...时

.graph {
    position: absolute;
    width: 100%;
}

......它奏效了！

注意：请勿在图表本身上指定height或width，只需在其父元素上指定

Highcharts容器比父div

1 个答案: