Highcharts + Bootstrap。表格响应问题

时间:2014-03-03 13:44:39

标签: javascript css twitter-bootstrap highcharts

当我将我的图表放入Bootstrap的.table-responsive时,图表不会填满整个tdHere's a jsFiddle of the problem。正如您可能看到的,我已将宽度设置为100%,这在网格中起作用。

似乎还有一个奇怪的错误,当我用“Inspect element”打开chrome控制台时,问题就解决了(发生在jsFiddle中)。

默认情况下,如何让图表填满整个<td>

1 个答案:

答案 0 :(得分:6)

初始化后,您必须设置图表的width设置。初始化后,Highcharts只适应resize事件(尝试一下,如果你调整窗口大小会改变宽度),所以你可能想要触发一个resize事件。

这是一个使用resize事件的jsFiddle(ab):http://jsfiddle.net/b9DMn/1/

Highcharts会在创建其图表时自动获取其容器的宽度,但如果您在其中放置断点,则会看到表格单元格在该时间点仍然平均分配。事实上,正是图表触发了表格来扩展正确的单元格。如果你可以固定单元格宽度,那可能也会有所帮助。

这是一个固定单元格宽度的jsFiddle,因此在添加内容时它们不会增长和缩小:http://jsfiddle.net/b9DMn/2/