Question

我试图让图形填充父div的整个宽度。加载页面时，图形的宽度超过div的宽度。我知道有类似的主题针对这个问题，但我还没有找到一个有效的解决方案。

我尝试过设置宽度：100％！important;在.highcharts-container上，但它只是图表的印章。我正在使用此引导程序模板：https://wrapbootstrap.com/theme/sing-web-angular-dashboard-WB0J6BJ85

我认为问题与侧边栏有关。当侧边栏是全宽时，图表超过了div，但是当它折叠时，图表会完美地填充div。当我用镀铬打开控制台时，图表会重新调整完美。

以下是一些图片以及图表和html的代码。

http://imgur.com/a/iLDM0

图：

<script>
$(function () {
    $('#bezoekers-graph').highcharts({
        chart: {
            type: 'spline'
        },
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

HTML：

<div class="col-md-12">
            <section class="widget">
                <header>
                    <h4>
                        <span class="fw-semi-bold">Aantal</span> bezoekers
                    </h4>
                    <div class="widget-controls">
                        <a href="#" data-widgster="close"><i class="glyphicon glyphicon-remove"></i></a>
                    </div>
                </header>
                <div class="widget-body">
                    <p class="fs-mini text-muted">
                        Aantal bezoekers voor <span class="fw-semi-bold">Kaffee vanGogh</span>.
                    </p>
                    <div id="bezoekers-graph">
                        <?php $this->load->view('templates/graphs/bezoekers-graph'); ?>
                    </div>
                </div>
            </section>
        </div>

提前致谢

Highcharts图宽度超过div

0 个答案: