Highstocks largeur du graphique pas rendu correctement

Bonjour, j'ai un problème avec highstocks lors de l'utilisation d'onglets jquery.

c'est le code pour le constructeur.

Chart = new Highcharts.StockChart({  
        Chart = new Highcharts.StockChart({
        chart: {
            renderTo: 
                'Container',
                 alignticks:false
             },
        xAxis: { .......... },
        yAxis: [{ ....... }],
        series : [{ .......... }]
    });

Le Conteneur a seulement la moitié de la largeur de la page entière.

Lorsque la page est chargée de l'onglet contenant le graphique, alors que sa largeur est rendu correctement.
Mais lorsque la page est chargée à un autre onglet, puis sa largeur s'étend sur toute la largeur de la page, qui se chevauchent avec d'autres choses sur la page. Si la page doit être actualisé afin de résoudre ce problème.

Quelqu'un a une solution à cela?

Veuillez utiliser les jsfiddle.net pour démontrer votre problème. Vous explication est bien, mais il manque le code correspondant.
Il y a chart.reflow() de la méthode.

OriginalL'auteur user1081236 | 2011-12-05

  1. 21

    Vous pouvez aussi déclencher la fenêtre.l'Événement de redimensionnement

    $(window).trigger('resize');

    Et Highcharts devrait mettre à jour le Graphique de la taille

    Ajouté ceci à la fin de l'onglet .cliquez sur la fonction et cela a fonctionné comme un charme.
    En dépit des versions plus récentes ayant l' .brasage() de la fonction, cela fonctionne pour les versions plus anciennes

    OriginalL'auteur david

  2. 10

    Highcharts définit la largeur du tableau à la largeur de l'élément conteneur. Donc, si le contenant élément est caché, il ne peut pas obtenir une largeur.

    Pour y remédier, vous pouvez définir la largeur de l'option lors de l'initialisation de votre carte:

    Chart = new Highcharts.StockChart({  
    Chart = new Highcharts.StockChart({
    chart: {
          renderTo: ...,
          width: <SOME WIDTH>
        },
    xAxis: { .......... },
    yAxis: [{ ....... }],
    series : [{ .......... }]
});

    Si vous n'êtes pas en mesure de mettre le tableau à la bonne largeur, j'ai utilisé cette astuce pour être en mesure d'obtenir la largeur d'un élément masqué:

    jQuery: Obtenir la hauteur de l'élément masqué en jQuery

    Espère que cette aide.

    OriginalL'auteur Brent Dubecki

  3. 7

    Je sais que c'est un long moment après que vous avez posé votre question, mais j'ai eu un problème similaire dans que mon dossier a été rendu sur le client avec une largeur égale à zéro chaque fois que le tableau a été sur un onglet qui n'a pas été activé par défaut. C'est parce que, comme @brent a indiqué, highcharts utilise le parent de la largeur, de l'INTERFACE utilisateur de jQuery 1.9, l'onglet widget utilise une ligne de style de display: none pour masquer les onglets inactifs.

    Au lieu d'utiliser le document de prêt événement de jQuery pour initialiser votre highchart, vous devez utiliser à la place de l'activer le cas de l'onglet de votre graphique est sur. Ceci a l'avantage supplémentaire de faire la snazzy graphique de l'animation à chaque fois que l'utilisateur clique sur l'onglet.

    Au lieu de:

    $(document).ready(function() { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​

    Utilisation:

    $('#tabcontainer').on('tabsactivate', function (event, ui) { 
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​

    OriginalL'auteur Robb Vandaveer

  4. 3

    Vous pouvez définir la largeur du graphique conteneur div avec un pourcentage.

    Quelque chose comme cela devrait fonctionner.

    <div id = "tab1"> 
  <div id="graphContainer1" style= "width: 90%"></div>
</div>
<div id = "tab2" style = "display:none"> 
  <div id="graphContainer2" style= "width: 60%"></div>
</div>

    Espère que cette aide.

    OriginalL'auteur Salvador P.

  5. 1

    Dans votre feuille de style de remplacer la règle pour le sélecteur de classe ".ui-tabs .ui-tabs-cacher" avec

    .ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
    }

    Solution prises à partir de: jQuery UI - Tabs

    Merci! Bien que j'utilise Bootstrap onglets, une version modifiée de cette astuce a fonctionné parfaitement. C'est ce que j'ai trouvé (je suis désolé pour le manque de mise en forme): .tab-content > .tab-pane, .pill-content > .pill-pane { display: block; position: absolute; left: -10000px; } .tab-content > .active, .pill-content > .active { position: static; left: auto; }
    Je l'ai juste essayé, mais il a préféré pour régler la hauteur de 0 pour les onglets inactifs, voir stackoverflow.com/a/23267110/537554

    OriginalL'auteur Ketan Modi