我不确定这是一个bootstrap还是highcharts的问题,但我似乎不能让我的图表大小正确;初始图表宽度太宽时,滚动条是存在的,并在一个引导跨度。调整窗口大小似乎永远不会产生太宽的宽度,但有时它们会太窄。
从span结构中删除代码似乎在所有情况下都能得到适当的宽度,因此我认为hc和bootstrap之间可能存在一些有害的交互。
我做了一个小提琴来演示,但请记住,您的浏览器窗口需要足够短才能导致滚动条:
http://jsfiddle.net/xEtherealx/Q5EGX/15/
有没有一种方法可以通过css强制宽度符合?我可以创建一个窗口调整回调函数作为解决方案,但我宁愿找到一个合适的解决方案。
编辑:以下是一个解决方案,可以在超时后调用,也可以在页面加载后调用一次:
this.setChartSize = function() {
chart.setSize( $(chart.container).parent().width(), $(chart.container).parent().height() );
return false;
};
超文本标记语言:
<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();
4条答案
按热度按时间zpqajqem1#
问题是,当页面加载时,Highcharts的容器宽度不同。我认为这是由于渲染时间(需要超过1ms),因此可能的解决方案是确保图表在渲染后具有适当的宽度和高度:http://jsfiddle.net/Q5EGX/17/(参见控制台注解)
jtoj6r0c2#
根据Highcharts chart.event.load文档添加以下内容:
从2.0.4版本开始,Highcharts.Chart还有第二个参数,可以传递回调函数在chart.load上执行。
当你想像这样初始化时,这很有用:
或者,当您存储JSON配置选项时,并且不想携带这种重复代码的重量。
vu8f3i0k3#
我发现我可以在CSS中通过强制.highcharts-loading类的宽度为100%来解决这个问题。你必须添加!因为元素在内联样式上设置了宽度。
euoag5mw4#
我在HighCharts和Bootstrap上也遇到了类似的问题(如果在图表初始化后出现滚动条,图表就太宽了)。我通过在页面顶部的
<head>
标记中添加以下代码片段解决了这个问题,强制立即显示垂直滚动条。