Highcharts graphiques ne pas redimensionner correctement sur la fenêtre de redimensionnement

J'ai 2 side-by-side de tableaux sur ma page, et j'aimerais les avoir redimensionnées lorsque la fenêtre est redimensionnée: leur conteneur est fixé à 50% de la largeur, ce qui, selon les exemples, devrait être suffisant.

Un exemple de travail de automatiquement de redimensionnement de la carte peut être trouvé @ http://jsfiddle.net/2gtpA/

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

NOTE: vous avez pour redimensionner l'image à plusieurs reprises pour reproduire le problème (de plus petite taille>plus>les plus petites doivent) faire

Je pense que tout réside dans la façon de déclarer les conteneurs... coller le code HTML le code JS pour 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>

OriginalL'auteur Guillaume S. | 2013-08-26

highcharts

18

Je bifurquais votre violon pour une solution de travail @ http://jsfiddle.net/AxyNp/
Le plus important fragment de code à partir de là, est-ce:
```
$(window).resize(function() {
    height = chart.height
    width = $("#chartRow").width() /2
    chart.setSize(width, height, doAnimation = true);
});
```
La solution porte sur cette DONC, après la réponse de l'.

Il semble être le meilleur que vous pouvez faire pour redimensionner le graphique du conteneur (et de la cellule) correctement est de compter sur votre propre redimensionner déclencheur. Note que j'ai mis le reflow à "false" dans le tableau d'options pour supprimer les déclencher.

Merci! qui a fait le tour.

OriginalL'auteur Greg Kramida
20

Vous pouvez éviter l'utilisation de javascript pour effectuer le redimensionnement et de s'appuyer sur le css à la place. Ceci peut être accompli par le rendu de la HighChart dans un div qui a:
```
position: absolute;
width: 100%;
```
Pour s'assurer que la hauteur du conteneur est le cas, vous aurez à habiller cette position absolue de l'élément en un autre élément qui a explicitement défini hauteur:
```
position: relative;
width: 100%;
height: 400px;
```
Par le rendu de la HighChart dans une position absolue de l'élément, le graphique sera sensible à la réduction de la largeur du parent.

OriginalL'auteur 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
    }
}

Utilisation

$(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 onglet

$('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/

OriginalL'auteur Davide

Vous devez vous connecter pour publier un commentaire.