当滚动条存在时，在引导流体跨度中，Highcharts图形宽度不正确 [英] Highcharts graph width is incorrect when scrollbar is present, in bootstrap fluid span

问题描述

我不知道这是一个引导或highcharts问题，但我似乎不能得到我的图表的大小正确;当滚动条存在和引导跨度中时，初始图表宽度太宽。调整窗口大小似乎不会产生过宽的宽度，但有时它们太窄。

I'm not sure if this is a bootstrap or highcharts issue but I cannot seem to get my chart to size correctly; the initial chart width is too wide when both a scrollbar is present and in a bootstrap span. Resizing the window never seems to produce widths that are too wide but sometimes they are too narrow.

从span结构中删除代码似乎会在所有情况下产生适当的宽度所以我认为hc和bootstrap之间可能有一些有害的交互作用。

Removing the code from the span construct seems to result in proper width in all situations so I am thinking that there may be some detrimental interaction between hc and bootstrap.

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

I made a fiddle to demonstrate, but keep in mind that your browser window will need to be short enough to cause a scrollbar:

http： //jsfiddle.net/xEtherealx/Q5EGX/15/

有没有办法通过css强制宽度符合？我可以创建一个回调窗口调整大小作为解决方法，但我宁愿找到一个正确的解决方案。

Is there a way I can force the width to conform via css? I can create a callback on window resize as a workaround but I would rather find a proper solution instead.

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

Edit: As suggested the following is a workaround, and could be called after some timeout or just once after page load:

    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();

推荐答案

问题是当页面加载容器宽度对于Highcharts是不同的。我认为这是由于渲染时间（需要超过1ms），所以可能的解决方案是确保图表在渲染后具有适当的widht nad高度： http ：//jsfiddle.net/Q5EGX/17/ （参见控制台注释）

The issue is that when page is loaded width of container for Highcharts is different. I think it's due to rendering time (takes more than 1ms), so possible solution is to make sure chart has proper widht nad height after rendering: http://jsfiddle.net/Q5EGX/17/ (see console comments)

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

这篇关于当滚动条存在时，在引导流体跨度中，Highcharts图形宽度不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！