web-dev-qa-db-fra.com

Les graphiques des graphiques ne se redimensionnent pas correctement lors du redimensionnement de la fenêtre

J'ai 2 graphiques côte à côte sur ma page, et j'aimerais les redimensionner lorsque la fenêtre est redimensionnée: leur conteneur est défini sur une largeur de 50%, ce qui, selon les exemples, devrait suffire.

Un exemple de travail de redimensionnement automatique du graphique peut être trouvé @ http://jsfiddle.net/2gtpA/

Un exemple non fonctionnel que j'ai fait pour reproduire le problème peut être vu @ http://jsfiddle.net/4rrZw/2/

[~ # ~] note [~ # ~] : vous devez redimensionner le cadre plusieurs fois pour reproduire le problème (plus petit> plus grand> plus petit devrait faire )

Je pense que tout réside dans la façon dont vous déclarez les conteneurs ... coller le code HTML comme le code JS pour les highcharts ne semble pas être pertinent ici ... (même dans les deux exemples)

<table style="width:100%;">
  <tr>
    <td style="width:50%;">
        <div id="container" style="height: 50%"></div>
    </td>
    <td style="width:50%;"></td>
  </tr>
</table>
highcharts
17
Guillaume S.

J'ai bifurqué votre violon vers une solution de travail @ http://jsfiddle.net/AxyNp/ L'extrait de code le plus important est le suivant:

$(window).resize(function() {
    height = chart.height
    width = $("#chartRow").width() / 2
    chart.setSize(width, height, doAnimation = true);
});

La solution porte sur ceci SO réponse de l'article.

Il semble que le mieux que vous puissiez faire pour redimensionner correctement le conteneur (et la cellule) du graphique est de vous fier à votre propre déclencheur de redimensionnement. Notez que j'ai défini la redistribution sur "false" dans les options du graphique pour supprimer le déclencheur existant.

18
Greg Kramida

Vous pouvez éviter d'utiliser javascript pour effectuer le redimensionnement et compter sur css à la place. Cela peut être accompli en convertissant le HighChart en div qui a:

position: absolute;
width: 100%;

Pour vous assurer que la hauteur du conteneur est appropriée, vous devrez encapsuler cet élément au positionnement absolu dans un autre élément qui a explicitement défini la hauteur:

position: relative;
width: 100%;
height: 400px;

En rendant le HighChart dans un élément absolu de position, le graphique sera sensible aux réductions de largeur dans le parent.

20
Mark Roper
/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null) && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(function () { // for only visible charts container in the curent context
                $container = $(this); // context container
                $container.find('div[id^="chart-"]').each(function () { // for only chart
                    $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                    $chart.setSize($container.width(), $chart.chartHeight, doAnimation = true); // adjust chart size with animation transition
                });
            });
        } else {
            chart.setSize($('.chart-container:visible').width(), chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    } catch (err) {
        // do nothing
    }
}

Usage

$(window).resize(function () {
    if (this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function () {
        // resizeEnd call function with pass context body
        adjustGraph.call($('body'));
    }, 500);
});

Pour bootstrap tab

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    isChart = $(this).attr('data-chart');
    var target = $(this).attr('href');
    if (isChart) {
        // call functio inside context target
        adjustGraph.call($(target));
    }
});


<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active">
         <a href="#anagrafica" data-toggle="tab"><h5>Anagrafica</h5></a>
    </li>
    <li><a href="#consumi" data-toggle="tab" data-chart="1"><h5>Consumi</h5></a></li>
</ul>

Sur le graphique

    new Highcharts.Chart({
            chart: {
                renderTo: 'chart-bar',
                defaultSeriesType: 'column',
                zoomType: 'xy',
                backgroundColor: null,
                events: {
                    load: function (event) {
                        adjustGraph(this);
                    }
                }
            },

Code HTML

<div class="tab-pane" id="charts">
    <div class="row-fluid">
        <div class="span6 offset3">
            <div id="myCarousel" class="carousel slide">
                <!-- Carousel items -->
                <div class="carousel-inner chart-container">
                    <div class="active item">
                        <h3>Chart 1/h3>
                        <div id="bar-pod-annuale">
                           <div id="chart-bar" style="width:100%;margin: 0 auto"></div>
                        </div>
                    </div>
                    <div class="item">
                        <h3>Char 2</h3>
                        /** chart **/
                    </div>
                    <div class="item">
                        <h3>Char 3</h3>
                        /** chart **/
                    </div>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
            </div>
        </div>
    </div>
</div>

Voir l'exemple sur jsfiddle

http://jsfiddle.net/davide_vallicella/LuxFd/2/

3
Davide