Highcharts ne redimensionne pas les graphiques dans les onglets

Je suis en utilisant twitter bootstrap avec des onglets. J'ai plusieurs onglets et des graphiques à l'intérieur de chaque onglet. Sur navigateur redimensionner, des tableaux qui ne sont pas au courant de l'onglet actif ne sont pas redimensionnée. En effet, il semble sorte de drôle avec une fine barre. Le courant de l'onglet actif fonctionne très bien. Quelqu'un a vu ce problème et existe-il des solutions ?

source d'informationauteur user428900

  1. 23

    Ici est un exemple:

    http://codepen.io/colinsteinmann/pen/BlGfE

    Essentiellement les .brasage() la fonction est appelée sur chaque graphique lorsqu'un onglet est sélectionné. De cette façon, le tableau devient redessiné, basé sur les nouvelles dimensions qui sont appliquées pour le conteneur lorsqu'il devient visible.

    C'est le plus important extrait de code:

    //fix dimensions of chart that was in a hidden element
jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { //on tab selection event
    jQuery( ".contains-chart" ).each(function() { //target each element with the .contains-chart class
        var chart = jQuery(this).highcharts(); //target the chart itself
        chart.reflow() //reflow that chart
    });
})
  2. 4

    Ceci est mon pour résoudre ce problème (à l'aide de jQuery):

    $("[data-highcharts-chart]").each(function () {
    var highChart = Highcharts.charts[$(this).data('highchartsChart')];
    var highChartCont = $(highChart.container).parent();
    highChart.setSize(highChartCont.width(), highChartCont.height());
    highChart.hasUserSize = undefined;
});

    Appeler cette fonction lorsque le tableau des gains se concentrer pour s'assurer qu'elle est redimensionnée correctement.

  3. 2

    J'ai eu un problème similaire et j'ai trouvé que la meilleure chose était de ne pas charger le graphique jusqu'à l'onglet a été montré. Donc, dans l'onglet événement, j'ai été rapidement chargement de la carte (mais une seule fois)

  4. 2

    Je viens de résoudre ce problème avec celui-ci. À l'aide de démarrage de la version 3.3.5

    Je pars ici parce que ce lien révélé quand j'ai googlé le problème au début. J'espère que cela aide.

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $(e.target.hash).highcharts().reflow();
    });

    HTML 

    <!-- Nav tabs -->
<ul class="nav nav-pills nav-justified" role="tablist" id="taks-tabs">
    <li role="presentation" class="active"><a href="#taks_met_std" aria-controls="taks_met_std" role="tab" data-toggle="tab">Met Standard</a></li>
    <li role="presentation"><a href="#taks_comm_perf" aria-controls="taks_comm_perf" role="tab" data-toggle="tab">Commended Performance</a></li>
    <li role="presentation"><a href="#taks_m_met_std" aria-controls="taks_m_met_std" role="tab" data-toggle="tab">TAKS-M Met Standard</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="taks_met_std"></div>
    <div role="tabpanel" class="tab-pane" id="taks_comm_perf"></div>
    <div role="tabpanel" class="tab-pane" id="taks_m_met_std"></div> 
</div>
  5. 2

    ajouter class="chart" à tous highcharts conteneurs à l'intérieur des onglets.

    ajouter cette jQuery code:

    jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () { 
    $( '.chart' ).each(function() { 
        $(this).highcharts().reflow();
    });
})
  6. 1

    J'ai trouvé la réponse après avoir cherché pendant un certain temps. Cela a été me rend fou j'ai donc envie de partager avec vous tous car rien ici n'a fonctionné pour moi.

    Ajouter ceci dans votre CSS 

    .tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     
    height: 0;          
    overflow-y: hidden; 
}

.tab-content > .active,
.pill-content > .active {
    height: auto;       
}

    Pour plus de détails, visitez la page, j'ai trouvé la solution à
    https://jonpolygon.com/bootstrap-tabs-100-percent-width-charts/

  7. 0

    - je résoudre ce problème avec le code suivant.

            $('#yourDivChart').highcharts({
            chart: {
                type: data.EjeX.Tipo,
                //width: width,
                //height: height,
                options3d: {
                    enabled: true,
                    alpha: 15,
                    beta: 15,
                    viewDistance: 25,
                    depth: 40
                },
                width: $('#DivContainerWithYourTabs').width() - 150
            },

    dans mon cas, c'est une partielle "_partialDetalleProyecto"

    J'espère fonctionne vous.