Highcharts не поместится в Bootstrap 3 модального тела

Как мне поместиться и сделать диаграмму с высоким графиком в соответствии с модами Bootstrap 3? Кажется, что диаграмма не зависит от 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">&times;</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();

будет работать как ожидалось