Les graphiques NVD3 ne s'affichent pas correctement dans l'onglet masqué

Je fais construire une page qui contient de nombreux graphiques, qui sont affichées une à la fois en fonction de l'onglet sur lequel vous êtes en train de regarder.

Le graphique dans le premier onglet actif s'affiche correctement. Cependant lorsque je clique sur un autre onglet, le graphique n'est pas rendu correctement.

Sans doute c'est parce que le champ caché n'a pas de dimensions jusqu'à ce qu'il est rendu visible. En fait, si j'ai redimensionner la fenêtre du graphique permettra de corriger ses proportions, et de rendre, de sorte qu'il remplit la largeur disponible.

Je peux résoudre ce problème en définissant explicitement la taille du graphique via le css, mais cela va à l'encontre de la réactivité de l'aspect des graphiques.

Quelqu'un peut me dire comment déclencher la même NVD3 événement qui est activé lorsque la fenêtre est redimensionnée? De cette façon, je peux le lier à la sélection d'un nouvel onglet, et nous espérons remédier au problème de rendu.

source d'informationauteur metaColin

13

J'ai eu le même problème (les graphiques sur plusieurs onglets), et c'est la seule chose que je pouvais me rendre au travail.
```
$(function () {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        window.dispatchEvent(new Event('resize'));
    });
});
```
J'ai le sentiment, cependant, que toutes les cartes sont en train d'être re-rendus, indépendamment du fait qu'ils sont sur l'onglet actif (visible) ou dans les onglets non sélectionnés (caché).

Personne ne sait comment s'assurer que SEULS le graphique actif est redimensionnée /redessinée?
12

J'ai compris comment déclencher l'événement resize j'avais besoin. Dans mon cas, les onglets sont entraînés par bootstrap. Alors j'ai tout simplement modifié mon bootstrap afficher l'onglet événement à déclencher une page de l'événement de redimensionnement. C'est un peu indirecte, mais il fait le travail:
```
jQuery('#myTab a').click(function (e) {
    e.preventDefault()
    jQuery(this).tab('show')
    jQuery(window).trigger('resize'); //Added this line to force NVD3 to redraw the chart
})
```
7

Il suffit d'ajouter ce code JavaScript:
```
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  window.dispatchEvent(new Event('resize'));
})
```
hidden.bs.tab est l'événement qui se déclenche après un nouvel onglet est affiché comme par le Bootstrap docs. Ce code se déclenche un événement de redimensionnement après chaque onglet.
3

J'ai été confronté à la même question. J'ai été en utilisant ng-show de faire des div caché . Une fois que je remplace ng-show avec ng-si je suis capable de voir graphique tracé dans le comportement attendu.
Explication :
1 . Lorsque nous utilisons ng-show ou ng-hide de faire des div caché, il change seulement il propriété d'affichage mais la div sera dans les dom.
2. Lorsque nous utilisons ng-si div est retiré de dom et encore ajouté dom si intérieurement il effectue l'opération de rafraîchissement sur nvd3 graphique trop. Ainsi, nous voyons corriger graphique au lieu de écrasée.
0

L'événement qui déclenche habituellement un redessiner la fenêtre resize événement -- NVD3 n'utilise pas un événement personnalisé pour cette. Vous pouvez contrôler vous-même; la définition usuelle est
```
nv.utils.windowResize(function() { d3.select('#chart svg').call(chart); });
```
(où "#graphique" est l'élément qui contient le graphique). Il n'y a rien qui vous empêche le déclenchement de la code sur un autre événement ou même juste courir le redessiner code explicitement lorsque vous changez d'onglet.

une approche plus efficace serait d'utiliser le graphique.méthode update ()

var chart_x = nv.models.somechart()
var chart_y = nv.models.somechart()

..... afficher les graphiques

jQuery('#myTab a').click(function (e) {
    e.preventDefault()
    jQuery(this).tab('show')
    if(jQuery(this)...something === '..x..')
      chart_x.update(); //CALL THE UPDATE
    else ...

})

0

Raison Pour Nouvelle Réponse

Vanille Javascript est nécessaire pour beaucoup de gens dans 2018. Comme beaucoup de cadres et de bibliothèques Javascript qui existent aujourd'hui ne sont pas bien jouer avec jQuery. Une fois sur un temps de répondre à tous les Javascript problèmes avec jQuery solution était acceptable, mais il n'est plus possible.

Problème

Lors du chargement C3.js ou D3.js graphiques, si la fenêtre n'est pas activement dans le site pendant le chargement de la page les graphiques ne s'affichent pas correctement.

Exemple
1. Si vous tapez dans l'URL, puis ouvrir un nouvel onglet et puis revenir en arrière après que votre page se charge.
2. Si vous actualisez la page a vos graphiques sur elle, puis de minimiser le navigateur et ouvrir vers l'arrière une fois la page chargée.
3. Si vous actualisez ou aller à la page avec les graphes, puis faites glisser votre doigt à l'écart d'une nouvelle fenêtre sur votre ordinateur. Puis revenir à la page avec les graphiques après qu'ils ont chargé.
Dans tous ces cas, votre C3.js /D3.js les graphiques ne s'affichent pas correctement. Généralement, vous verrez une toile vierge. Donc, si vous vous attendiez à un graphique à barres, vous verrez une toile sans barres.

Fond

Bien que j'ai vu cette question répondu, j'ai besoin d'une réponse qui ne PAS utiliser jQuery. Maintenant que nous avons atteint les jours de tout ce qui ne peut pas être fixé avec jQuery j'ai pensé qu'il semblait apte à fournir à la vanille, Javascript réponse à cette question.

Mon équipe face à la question que l'C3.js /D3.js les graphiques ne se charge pas si vous avez rafraîchi la page et de lire de suite ou réduite. Fondamentalement, si vous n'avez pas à rester sur la page et la conserver dans le site jusqu'à ce qu'il a fait de chargement vous ne voudriez pas voir les graphiques jusqu'à ce que vous redimensionnée à nouveau la page. Je sais que c'est un problème qui arrive à tout le monde à l'aide de C3.js /D3.js mais nous sommes plus particulièrement à l'aide de la Foudre dans Salesforce.

Réponse

Notre solution était d'ajouter cela dans le contrôleur de fonction qui initialise les tableaux. N'importe qui peut l'utiliser dans n'importe quelle fonction ils écrivent pour initialiser leurs C3.js /D3.js graphiques indépendamment de leur pile. Ce n'est pas Salesforce dépendante, mais il ne fonctionne en effet si vous êtes confrontés à ce problème dans Salesforce.
```
document.addEventListener('visibilitychange', () => {
   console.log(document.visibilityState);
   window.dispatchEvent(new Event('resize'));
});
```

Vous devez vous connecter pour publier un commentaire.