Highcharts не поместится в Bootstrap 3 модального тела
Как мне поместиться и сделать диаграмму с высоким графиком в соответствии с модами Bootstrap 3? Кажется, что диаграмма не зависит от css страницы, но я не уверен.
![highcharts modal]()
<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]
}]
});
});
Вот jsfiddle.
Исправление исправления:
$('#reflow-chart').click(function () {
$('#first-chart').highcharts().reflow();
$('#second-chart').highcharts().reflow();
});
Ответы
Ответ 1
Это общая проблема с помощью высокопроизводительных диаграмм. Лучший совет, который я мог бы получить, - использовать window.resize()
после отображения Highcharts, но на самом деле есть функция API в Highcharts, называемая reflow
, что также может помочь.
Решение состоит в том, чтобы улавливать модальные события bootstrap и обновлять ширину Highcharts при обратном вызове show.bs.modal event:
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 не будет отскакивать. Это не идеально, но лучше, чем ничего.
Ответ 2
$('#J_report_graph').on('shown.bs.modal', function (event) {
$("#J_report_graph_container").highcharts({});
});
$("#J_report_graph").modal();
будет работать как ожидалось