我不确定这是引导程序问题还是高图问题,但是我似乎无法正确调整图表大小;同时存在滚动条和引导跨度时,初始图表宽度太宽。调整窗口大小似乎永远不会产生太宽的宽度,但有时它们会太窄。
在所有情况下,从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();
问题在于,加载页面时,用于Highcharts的容器的宽度不同。我认为这是由于渲染时间(耗时超过1毫秒)所致,因此可能的解决方案是确保渲染后图表具有适当的宽度和高度
setTimeout(function() { chart.setSize($("#barchart").width(), $("#barchart").height()); }, 1);