NVD3 Charts nicht Rendern richtig in ausgeblendeten Registerkarte

Ich Baue eine Seite, die enthält viele Diagramme, die jeweils einzeln angezeigt werden je nachdem, welche Registerkarte Sie sind auf der Suche.

Dem Diagramm in der Registerkarte initial aktiv richtig gerendert wurde. Jedoch wenn ich auf einen anderen tab, wird das Diagramm nicht richtig dargestellt.

Vermutlich ist dies, weil das hidden-Feld nicht haben Abmessungen bis es sichtbar gemacht wird. In der Tat, wenn ich die Größe der Fenster wird das Diagramm korrekt ist es die Proportionen, und Rendern, so dass es füllt die zur Verfügung stehende Breite.

Kann ich dieses problem beheben, indem Sie explizit definieren die Größe des Diagramms über css, aber diese Niederlagen der responsive Aspekt der charts.

Kann mir jemand sagen, wie der trigger die gleichen NVD3-event wird aktiviert, wenn das Fenster ändert? So kann ich binden Sie es an die Auswahl einer neuen Registerkarte, und hoffentlich beheben die rendering-Problem.

InformationsquelleAutor der Frage metaColin | 2014-02-04

  1. 13

    Ich hatte das gleiche Problem (Diagramme auf mehreren tabs), und das ist das einzige, was ich bekommen konnte, um zu arbeiten.

    $(function () {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        window.dispatchEvent(new Event('resize'));
    });
});

    Habe ich das Gefühl, jedoch, dass alle in den charts sind neu gerendert, unabhängig davon, ob Sie auf die aktive Registerkarte (sichtbar) oder in der nicht ausgewählten Registerkarten (versteckt).

    Weiß jemand, wie man sicherstellen, dass NUR das aktive Diagramm wird in der Größe verändert /neu gezeichnet?

    InformationsquelleAutor der Antwort Nicholas Hamilton

  2. 12

    Ich herausgefunden, wie man auslösen das resize-Ereignis, die ich brauchte. In meinem Fall sind die Registerkarten angetrieben durch bootstrap. Also habe ich einfach meine modifizierten bootstrap-Registerkarte anzeigen Ereignis zum auslösen einer Seite resize-Ereignis. Es ist ein wenig indirekt, aber es bekommt den job getan:

    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
})

    InformationsquelleAutor der Antwort metaColin

  3. 7

    Fügen Sie einfach dieses JavaScript:

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  window.dispatchEvent(new Event('resize'));
})

    hidden.bs.tab ist das Ereignis, das ausgelöst wird, nachdem eine neue Registerkarte angezeigt wird, wie pro die Bootstrap docs. Dieser code wird ausgelöst, ein resize-Ereignis nach jedem tab ändern.

    InformationsquelleAutor der Antwort nostromo

  4. 3

    Ich Stand vor dem gleichen Problem. Ich war mit ng-show zu machen, div ausgeblendet . Einmal habe ich ersetzt, ng-show mit ng-wenn ich bin in der Lage, um zu sehen, graph gezeichnet, in die das erwartete Verhalten. Erklärung:

    1. Wenn wir von ng-show oder ng-hide zu machen, div ausgeblendet, es ändert sich nur es Anzeige-Eigenschaft aber div wird in der dom.

    2. Wenn wir ng-wenn div entfernt von dom und wieder Hinzugefügt dom, so dass es intern führt das Neuzeichnen Betrieb auf nvd3 Graphen zu. Daher sehen wir die richtige Grafik statt gequetscht.

    InformationsquelleAutor der Antwort samyak bhalerao

  5. 1

    Grund Für Die Neue Antwort

    Vanille Javascript ist notwendig für eine Menge von Menschen in 2018. Als eine Menge von frameworks und Javascript-Bibliotheken, die heute existieren, nicht gut zu spielen mit jQuery. Es war einmal eine Zeit, um alle Javascript-Probleme mit jQuery-Lösung war akzeptabel, aber es ist nicht mehr möglich.

    Problem

    Beim laden C3.js oder D3.js Grafiken, wenn das Ansichtsfenster nicht aktiv im Ort, bei laden der Seite die Grafiken nicht korrekt wiedergegeben werden.

    Beispiel

    1. Wenn Sie in der URL dann öffnen Sie einen neuen tab und gehen Sie dann zurück, nachdem Ihre Webseite geladen ist.

    2. Wenn Sie die Seite aktualisieren, die Ihre Grafiken auf es dann minimieren Sie den Webbrowser, und öffnen Sie Sie wieder, nachdem die Seite geladen wurde.

    3. Wenn Sie aktualisieren oder wechseln Sie zu der Seite mit den Diagrammen und streichen Sie dann zu einem neuen Fenster auf Ihrem computer. Dann gehen Sie zurück zu der Seite mit den Diagrammen nach, die Sie geladen haben.

    In all diesen Fällen Ihre C3.js /D3.js Graphen werden nicht korrekt wiedergegeben. In der Regel werden Sie sehen eine leere Leinwand. Also, wenn Sie erwarten, wurden ein Balkendiagramm, würden Sie sehen, eine Leinwand ohne die bars gezogen.

    Hintergrund

    Obwohl ich gesehen habe, diese Frage beantwortete ich brauchte eine Antwort, dass hat NICHT jQuery verwenden. Jetzt, dass wir erreicht haben, die Tage alles kann nicht behoben werden mit jQuery ich dachte, es schien fit sorgt für eine vanilla-Javascript Antwort auf diese Frage.

    Mein team vor das Problem, dass die C3.js /D3.js Graphen würde nicht geladen werden, wenn Sie aktualisiert die Seite und geklaut entfernt oder minimiert. Im Grunde, wenn Sie nicht auf der Seite bleiben und halten es im Ort, bis es getan war, be-Sie nicht sehen würde der Graphen, bis Sie verkleinert die Seite wieder. Ich weiß, das ist ein problem, das passiert jedem mit C3.js /D3.js aber wir sind speziell mit Blitz in Salesforce.

    Antwort

    Unser fix war, fügen Sie diese in der controller-Funktion, initialisiert die charts. Jeder kann mit diesem in jeder Funktion, die Sie schreiben, initialisieren Ihrer C3.js /D3.js Grafiken, unabhängig von Ihrem Stapel. Dies ist keine Salesforce-abhängig, aber es funktioniert in der Tat, wenn Sie vor dieser Frage in Salesforce.

    document.addEventListener('visibilitychange', () => {
   console.log(document.visibilityState);
   window.dispatchEvent(new Event('resize'));
});

    InformationsquelleAutor der Antwort wuno

  6. 0

    Den Fall, dass in der Regel löst ein Neuzeichnen der Fenster resize event -- NVD3 nicht verwenden Sie ein benutzerdefiniertes Ereignis. Sie können Steuern, diese selbst aber, die übliche definition ist

    nv.utils.windowResize(function() { d3.select('#chart svg').call(chart); });

    ("#chart" ist das element, enthält das Diagramm). Es gibt nichts stoppen Sie die Auslösung der code auf einer anderen Veranstaltung oder auch nur mit der zeichnen-code explizit, wenn Sie die Registerkarte ändern.

    InformationsquelleAutor der Antwort Lars Kotthoff

  7. 0

    einen effizienteren Ansatz wäre das verwenden des Diagramms.update () - Methode

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

    ..... zeigen charts

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

    })

    InformationsquelleAutor der Antwort Bogdan

Schreibe einen Kommentar