Highcharts不适合Bootstrap 3模态体

如何使用Bootstrap 3模态拟合并制作高图表图表？ 看起来图表独立于页面的CSS，但我不确定。

 
 
 
 ×Close 
Assortment Analysis
 
 
 
 
 
 
 
 
 
 Close 
 
 
  

 $(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: '{series.name}: {point.y} ({point.percentage:.0f}%)
', 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] }] }); }); 

这是一个jsfiddle 。

回流修复：

 $('#reflow-chart').click(function () { $('#first-chart').highcharts().reflow(); $('#second-chart').highcharts().reflow(); }); 

Answer 1

这是highcharts的常见问题。 我得到的最好的建议是在显示Highcharts之后使用window.resize() ，但实际上在Highcharts中有一个名为reflow的API函数，这也可以提供帮助。

解决方案是捕获bootstrap模态事件并在shown.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(); }); 

见演示 。 我在这里使用visibility css属性，因此Highchart不会反弹。 这不是理想的，但总比没有好。

Answer 2

 $('#J_report_graph').on('shown.bs.modal', function (event) { $("#J_report_graph_container").highcharts({}); }); $("#J_report_graph").modal(); 

将按预期工作