billboard.js elease: viewBox-Größenänderung!

Heute ist die neue Version 3.14 erschienen! Diese Version enthält 5 neue Funktionen, 8 Fehlerbehebungen und eine Reihe von Verbesserungen.

Detaillierte Informationen zur Veröffentlichung finden Sie in der Versionsmitteilung:

• https://github.com/naver/billboard.js/releases/tag/3.14.0

Was ist neu?

Größenänderung der ViewBox

Neue Größenänderungsoption wurde hinzugefügt. Bei der Standardgrößenänderung wird die Größe basierend auf den Änderungen der Containerabmessungen angepasst.

Die neue Option resize.auto='viewBox' ermöglicht die Größenänderung des Diagramms unter Beibehaltung des Seitenverhältnisses und ohne Berechnungskosten.

Im Grunde nutzt es das Verhalten des „viewBox“-Attributs und streckt tatsächlich das SVG-Ansichtsfenster.

Demo: https://naver.github.io/billboard.js/demo/#ChartOptions.resizeViewBox

Wenn die Nutzungsanforderung übereinstimmt, ist dies unbedingt zu empfehlen.

axis.evalTextSize

Wenn das Diagramm zum Rendern initialisiert wird, berechnet es intern die Textgröße der Achsenmarkierungen, um den für die Achsenfläche benötigten Platz zu berechnen.

Im Allgemeinen muss dieser Vorgang überhaupt nicht berücksichtigt werden, aber wenn sich die Textgrößen der Achsenstrichpunkte nach dieser Initialisierung ändern, wird die Berechnung falsch gerendert, da die intern verwendete Textgröße der Strichstriche nicht gültig ist nach den Änderungen.

Um diesen Anwendungsfall zu verbessern, wird die neue Option axis.evalTextSize bereitgestellt, mit der die Methode zur Berechnung der Achsenstrichgröße ausgewählt werden kann.

axis: {
    // 1: default, which will memoize evaluated axis text size
    evalTextSize: true,

    // 2: will evaluate the dimension of axis text size every time.
    evalTextSize: false,

    // 3: customize dimension evaluator
    evalTextSize: function(text) {
        ...
        return {width, height):
   }
}

Interaktion.onout

Das „Standardverhalten“ bei Abwesenheit vom Kartenbereich führt zur Defokussierung des aktuell ausgewählten Status. Das heißt, der Anzeigestatus von Tooltip, fokussierter Rasterlinie usw.

Mit der neuen Option bleibt der letzte Auswahlstatus erhalten, auch wenn Sie sich außerhalb des Diagrammbereichs befinden.

Technisch gesehen aktiviert oder deaktiviert die Option die Standardinteraktion für „onout“-Ereignisse.

interaction: {
    onout: false
}

erzwungenes verzögertes Rendern

Die Option render.lazy sorgt dafür, dass das Containerelement gerendert wird, wenn es sichtbar wird. Nützlich für Situationen, in denen das Diagrammelement später initialisiert werden musste.

Die Bestimmung wird automatisch eingestellt, wenn das Containerelement nicht sichtbar ist. Und es gibt keine Möglichkeit, das Rendern in diesem Zustand zu erzwingen, da die Initialisierung im verborgenen Zustand möglicherweise zu einem falschen Rendern führen kann und im Allgemeinen keine Bedeutung hat.

Aber es gibt auch Sonderfälle dafür. Um diese Anforderungen zu erfüllen, wird bei expliziter Festlegung von render.lazy=false die Initialisierung unabhängig vom Sichtbarkeitsstatus des Containerelements durchgeführt.

axis: {
    // 1: default, which will memoize evaluated axis text size
    evalTextSize: true,

    // 2: will evaluate the dimension of axis text size every time.
    evalTextSize: false,

    // 3: customize dimension evaluator
    evalTextSize: function(text) {
        ...
        return {width, height):
   }
}

Sichtbarkeitsstatus für den Ereignisrückruf des Legendenelements

Für die Ereignisrückruffunktionen des Legendenelements wurde eine kleine informative Verbesserung hinzugefügt.

Ereignisrückrufe lieferten nur den aktuellen Legenden-ID-Wert. Führen Sie bei Bedarf eine Aufgabe basierend auf der Sichtbarkeit der Legende aus, die Sie selbst implementieren müssen.

Es war nicht schwer, aber definitiv eine umständliche Aufgabe. Um dies zu beseitigen, wird jetzt der „sichtbare“ Status des Legendenelements übergeben.

Basierend auf diesem Argument kann eine Aufgabe basierend auf dem Sichtbarkeitsstatus ausgeführt werden.

interaction: {
    onout: false
}

Schließen

Das ist alles, was wir für diese Version und wahrscheinlich die letzten Feature-Implementierungen für dieses Jahr haben.

Vielen Dank immer und bleiben Sie auf dem Laufenden für kommende Updates!

Das obige ist der detaillierte Inhalt vonbillboard.js elease: viewBox-Größenänderung!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!