Highcharts ne rentrera pas dans le corps modal Bootstrap 3

Comment puis-je adapter et de faire un highcharts graphique responsive avec Bootstrap 3 modaux? Il semble que le graphique est indépendante de la css de la page, mais je ne suis pas sûr.

Highcharts ne rentrera pas dans le corps modal Bootstrap 3

<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]
        }]
    });
});

Ici est un jsfiddle.

De redistribution correctif:

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

source d'informationauteur Christian Burgos | 2014-08-20

  1. 18

    C'est un commune problème avec highcharts. Le meilleur conseil que j'ai pu obtenir est d'utiliser window.resize() après Highcharts est montré, mais en fait il n'y est une fonction de l'API dans Highcharts appelé redistributionqui pourrait aussi aider.

    La solution consiste à prendre modal bootstrap événements et de mettre à jour votre Highcharts largeur dans le rappel de montré.bs.modal événement:

    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();
});

    Voir démo. J'utilise visibility propriété css ici, donc Highchart ne sera pas rebondir. Ce n'est pas l'idéal, mais mieux que rien.

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

$("#J_report_graph").modal();

    fonctionnera comme prévu