当存在滚动条时，在引导程序流体跨度中，Highcharts图形宽度不正确

Question

我不确定这是引导程序问题还是高图问题，但是我似乎无法正确调整图表大小；同时存在滚动条和引导跨度时，初始图表宽度太宽。调整窗口大小似乎永远不会产生太宽的宽度，但有时它们会太窄。

在所有情况下，从span构造中删除代码似乎都会导致适当的宽度，因此我认为hc和bootstrap之间可能存在有害的交互作用。

我做了一个小提琴来演示，但是请记住，您的浏览器窗口需要足够短才能引起滚动条：

有没有办法我可以通过CSS强制宽度一致？我可以通过调整窗口大小来创建回调，但我宁愿找到 合适的 解决方案。

编辑 ：如建议的以下是一种解决方法，可以在超时后或页面加载后仅调用一次：

    this.setChartSize = function() {
        chart.setSize( $(chart.container).parent().width(), $(chart.container).parent().height() );
        return false;
    };

HTML：

<div id="content" class="container-fluid">
    <div class="row-fluid">
        <div id="toresize" class="span3" style="background: gray; overflow: auto;">
            <div class="targetpane">
                 <h4 class="text-center">HC Sizing Test</h4>

                <!-- take up space -->
                <div class="well well-small" style="height: 160px;"></div>

                <!-- Chart -->
                <div class="well well-small" style="padding: 5px;">
                    <div id="barchart" style="height: 160px; margin-bottom: 5px;"></div>
                </div>

                <!-- take up space -->
                <div class="well well-small" style="height: 160px;"></div>
            </div>
        </div>

        <!-- span -->
        <div class="span9" style="background: gray;">
            <div class="myBorder">Some content</div>
        </div>
    </div>
</div>
<script src="http://code.highcharts.com/highcharts.js"></script>

CSS：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.well
{
    background-color: #444;
}

.targetpane
{
    color: #888;
    background-color: #1B1B1B;
    border: 1px solid #888;
    border-radius: 3px;
    padding: 0px 5px 0px 5px;
}

.bodycontainer {
    height: 50px !important;
    white-space: nowrap;
    overflow-x: hidden;
}

JS：

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'barchart',
        borderWidth: 1
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

$(window).resize(function () {
    $('#toresize').height($(window).height() - 3);
    console.log($(window).height());
})
$(window).resize();

Answer 1

问题在于，加载页面时，用于Highcharts的容器的宽度不同。我认为这是由于渲染时间（耗时超过1毫秒）所致，因此可能的解决方案是确保渲染后图表具有适当的宽度和高度

setTimeout(function() {
      chart.setSize($("#barchart").width(), $("#barchart").height());
}, 1);