Highcharts + Bootstrap。表格响应问题 [英] Highcharts + Bootstrap .table-responsive issue

问题描述

当我将图表放在Bootstrap的 .table-response 内时，图表不会填充整个 td 。 这是一个jsFiddle问题。正如你所看到的，我已将宽度设置为100％，并且在网格中工作。

似乎有一个奇怪的错误，当我打开Chrome时控制台与检查元素问题已解决（发生在jsFiddle也）。

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

解决方案

您必须设置宽度初始化后的图表设置。初始化后，Highcharts只适应resize事件（试一试，如果调整窗口大小会改变宽度），所以你可能想触发resize事件。

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

Highcharts在创建图表时会自动获取其容器的宽度，但如果您在其中放置断点，则会看到表格单元格仍然在那个时候平分。实际上，这是触发表格增长正确单元格的图表。如果你可以固定单元格的宽度，那也可能有帮助。

这是一个jsFiddle，用于固定单元格的宽度，所以当内容不会增长和缩小添加： http://jsfiddle.net/b9DMn/2/

When I put my chart inside of Bootstrap's .table-responsive the chart doesn't fill the entire td. Here's a jsFiddle of the problem. As you might see I've set the width to 100%, and this worked in the grid.

There seems to be a strange bug aswell, when I open the chrome console with "Inspect element" the problem is solved (happens in the jsFiddle aswell).

How can I make the chart fill the entire <td> by default?

解决方案

You'll have to set the width setting of chart after initialization. After initialization, Highcharts only adapts on a resize event (try it out, if you resize the window it will change width), so you might want to trigger an resize event.

Here is a jsFiddle (ab)using a resize event: http://jsfiddle.net/b9DMn/1/

Highcharts does automatically gets the width of its container when its creating its chart, but if you put a breakpoint there you'll see that the table cells are still divided equally at that point in time. In fact, it is the chart that triggers the table to grow the right cell. If you can fixate the cell width, that would probably help too.

Here is a jsFiddle fixating the width of the cells, so they don't grow and shrink when content gets added: http://jsfiddle.net/b9DMn/2/

这篇关于Highcharts + Bootstrap。表格响应问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！