billboard.js elease : redimensionnement de viewBox !

La nouvelle version v3.14 est sortie aujourd'hui ! Cette version comprend 5 nouvelles fonctionnalités, 8 corrections de bugs et de nombreuses améliorations.

Pour les informations détaillées sur la version, veuillez consulter la note de version :

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

Quoi de neuf?

redimensionnement de viewBox

Une nouvelle option de redimensionnement est ajoutée. Le redimensionnement par défaut sera redimensionné en fonction des changements de dimension de son conteneur.

La nouvelle option resize.auto='viewBox' permettra de redimensionner le graphique en conservant les proportions, et sans aucun coût de calcul.

Fondamentalement, il utilise le comportement de l'attribut « viewBox », et en réalité, il étend la fenêtre d'affichage SVG.

Démo : https://naver.github.io/billboard.js/demo/#ChartOptions.resizeViewBox

Si les exigences d'utilisation correspondent, c'est définitivement recommandé.

axis.evalTextSize

Lorsque le graphique est initialisé pour le rendu, la taille du texte de graduation de l'axe est calculée en interne pour calculer l'espace nécessaire à la zone de l'axe.

En général, ce processus n'est pas du tout nécessaire à prendre en compte, mais dans le cas où la taille du texte de graduation de l'axe change après cette initialisation, le calcul entraînera un rendu incorrect, car la taille du texte de graduation utilisée en interne n'est pas valide. après les changements.

Pour améliorer ce cas d'utilisation, nous fournirons une nouvelle option axis.evalTextSize, où vous pourrez choisir le moyen d'obtenir le calcul de la taille des graduations de l'axe.

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

interaction.onout

Le comportement « par défaut » consistant à s'éloigner de la zone graphique défocalise l'état actuellement sélectionné. Cela signifie, l'état affiché de l'info-bulle, la ligne de grille ciblée, etc.

La nouvelle option permettra de conserver le dernier état de sélection, même en étant éloigné de la zone graphique, pour conserver le dernier état de sélection.

Techniquement, l'option activera ou désactivera l'interaction par défaut pour l'événement « onout ».

interaction: {
    onout: false
}

rendu paresseux forcé

L'option render.lazy fera le rendu lorsque l'élément conteneur deviendra visible. Utile dans les cas où l'élément graphique devait être initialisé ultérieurement.

La détermination sera automatiquement définie lorsque l'élément conteneur n'est pas visible. Et il n'y a aucun moyen de forcer le rendu dans cette condition, car l'initialisation sur un état caché peut éventuellement donner lieu à un rendu erroné et n'a aucun sens en général.

Mais il y a aussi des cas particuliers pour faire ça. Pour répondre à ces nécessités, lorsqu'explicit render.lazy=false est défini, il s'initialisera quel que soit l'état de visibilité de l'élément conteneur.

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

État de visibilité du rappel d'événement de l'élément de légende

Une petite amélioration informative a été ajoutée pour les fonctions de rappel d'événement de l'élément de légende.

Les rappels d'événements fournissaient uniquement la valeur actuelle de l'identifiant de légende. Si nécessaire, effectuez une tâche basée sur la visibilité de la légende, vous devez la mettre en œuvre vous-même.

Ce n’était pas difficile, mais c’est vraiment une tâche fastidieuse. Pour éliminer cela, nous passerons désormais l'état « visible » de l'élément de légende.

Sur la base de cet argument, peut exécuter une tâche en fonction de l'état de visibilité.

interaction: {
    onout: false
}

Clôture

C'est tout ce que nous avons pour cette version et probablement les dernières implémentations de fonctionnalités pour cette année.

Merci toujours et restez à l'écoute des mises à jour à venir !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!