twitter-bootstrap Highcharts 不适合 Bootstrap 3 模态主体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25398127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts won't fit in Bootstrap 3 modal body
提问by Christian Burgos
How do I fit and make a highcharts chart responsive with Bootstrap 3 modals? It seems that the chart is independent from the css of the page, but I'm not sure.
如何使用 Bootstrap 3 模态拟合和制作 highcharts 图表？似乎图表独立于页面的css，但我不确定。
<div class="modal fade" id="chart-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Assortment Analysis</h4>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-body">
<div id="container"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Lazada', 'Competitor 1', 'Competitor 2', 'Competitor 3', 'Competitor 4']
},
yAxis: {
min: 0,
title: {
text: 'Price Range'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: '100 - 300',
data: [5, 3, 4, 7, 2]
}, {
name: '301 - 500',
data: [2, 2, 3, 2, 1]
}, {
name: '501 - 1000',
data: [3, 4, 4, 2, 5]
}, {
name: '1001 - 3000',
data: [3, 4, 4, 2, 5]
}, {
name: '3001 - 5000',
data: [3, 4, 4, 2, 5]
}, {
name: '5001 - 10000',
data: [3, 4, 4, 2, 5]
}]
});
});
Here is a jsfiddle.
这是一个jsfiddle。
Reflow fix:
回流修复：
$('#reflow-chart').click(function () {
$('#first-chart').highcharts().reflow();
$('#second-chart').highcharts().reflow();
});
回答by Ilya Luzyanin
This is a commonissue with highcharts. The best advice I could get is to use window.resize()after Highcharts is shown, but actually there is an API function in Highcharts called reflow, that could also help.
这是highcharts的常见问题。我能得到的最好建议是window.resize()在显示 Highcharts 之后使用，但实际上 Highcharts 中有一个名为 的 API 函数reflow，它也可以提供帮助。
The solution is to catch bootstrap modal events and update your Highcharts width in callback of shown.bs.modalevent:
解决方案是捕获 bootstrap modal 事件并在show.bs.modal事件的回调中更新您的 Highcharts 宽度：
var chart = $('#container').highcharts();
$('#chart-modal').on('show.bs.modal', function() {
$('#container').css('visibility', 'hidden');
});
$('#chart-modal').on('shown.bs.modal', function() {
$('#container').css('visibility', 'initial');
chart.reflow();
});
See demo. I use visibilitycss property here so Highchart won't bounce. This is not ideal, but better than nothing.
见演示。我visibility在这里使用css 属性，所以 Highchart 不会反弹。这并不理想，但总比没有好。
回答by Orkun Tuzel
I tried the accepted solution, but in my case I didn't have an option to use a specific module id that already exist in the html, so solution below didn't work for me.
我尝试了接受的解决方案，但在我的情况下，我没有选择使用 html 中已经存在的特定模块 ID，所以下面的解决方案对我不起作用。
$('<modal-id>').on('shown.bs.modal', function() {
chart.reflow();
});
What I was trying to do is, dynamically adding a modal to the html as an EmberJS component which only has a specific class.
我想要做的是，动态地向 html 添加一个模态作为一个 EmberJS 组件，它只有一个特定的类。
My solution was this:
我的解决方案是这样的：
App.registerComponentFactory('my-chart', SplineChart.extend({
setup: (function() {
$('body')
.off('shown.bs.modal', '.my-modal')
.on('shown.bs.modal', '.my-modal', () => this.reflow());
}).on('init'),
So each time my chart module is initialized, it binds the event handler to the modal. And the
所以每次我的图表模块初始化时，它都会将事件处理程序绑定到模态。而
.off('shown.bs.modal', '.my-modal')
part is also needed for unbinding the handler each time when the modal is triggered, otherwise the reflow function was running successfully only in the first attempt.
每次触发模态时都需要解除绑定处理程序，否则回流功能仅在第一次尝试时成功运行。
This may be useful for similar cases.
这对于类似的情况可能很有用。
回答by Eric
Apply this
应用这个
chart: {
events: {
load: function(chart) {
$timeout(function() {
chart.target.reflow();
);
}
}};
回答by linuxlsx
$('#J_report_graph').on('shown.bs.modal', function (event) {
$("#J_report_graph_container").highcharts({});
});
$("#J_report_graph").modal();
will work as expected
将按预期工作
