C3: forcer le saut de ligne dans le texte de l'axe des x

Créé le 17 oct. 2014  ·  9Commentaires  ·  Source: c3js/c3

Hey

http://jsfiddle.net/gbdtjsba/11/

J'ai des étiquettes assez longues dans mon graphique. J'ai ajouté une hauteur dure de 500px au graphique et 200px à l'axe x qui fonctionne, mais j'aimerais rendre la hauteur de l'axe dynamique si possible.

Dois-je parcourir les étiquettes pour trouver la plus grande et calculer sa largeur avant d'appliquer le graphique, ou est-ce que c3 a une fonctionnalité qui peut le faire ?

Peut-être lié à celui-ci : https://github.com/masayuki0812/c3/issues/527

Merci pour cette excellente bibliothèque, jusqu'à présent, cela m'a permis d'économiser de nombreuses heures de programmation d3 :)

C-feature-request

Commentaire le plus utile

Il semble ne pas se réveiller dans les violons. Qu'en est-il du code réel ? Ça marche pour moi. Et s'il vous plaît, définissez axis.x.tick.multiline = false pour qu'il s'affiche sur une seule ligne. Maintenant, le multiligne est par défaut.

Je pense qu'il semble raisonnable d'introduire quelque chose pour forcer les sauts de ligne. Je mettrai en œuvre si besoin.

Tous les 9 commentaires

Bonjour, merci pour votre signalement. Je pense que ce commit permet de calculer automatiquement la hauteur de l'axe x, alors pourriez-vous réessayer le dernier code? Merci.

METTRE À JOUR:
J'ai introduit axis.x.tick.width pour prendre en charge le texte de coche sur plusieurs lignes, veuillez donc définir cette option null à ce moment-là. Sans cela, le texte de la coche sera divisé en plusieurs lignes même si elles sont tournées.

Bonjour,

Merci pour votre mise à jour, malheureusement je ne pense pas que cela fonctionne -

  1. http://jsfiddle.net/gbdtjsba/15 - Sans la hauteur de l'axe x 200px (que j'essaie de supprimer), les résultats sont les mêmes qu'avant. Essayez de redimensionner le graphique pour voir un comportement incohérent.
  2. http://jsfiddle.net/gbdtjsba/11 - Au chargement, l'axe x semble avoir la mauvaise hauteur, mais cela est corrigé lorsque vous redimensionnez. Cette version a toujours une hauteur de 200 pixels sur l'axe x, et je pense qu'elle revient à cette hauteur, pas à une hauteur calculée.

Je pense que ce qui doit arriver est, par exemple, que le graphique a une hauteur de 500px, les graduations de l'axe ont une largeur/hauteur maximale de 125px, donc le graphique reçoit automatiquement une hauteur de 375px et des étiquettes 125px. Ou, si vous préférez / en option, la possibilité de faire la hauteur du graphique 500px, et la hauteur totale, y compris les étiquettes, devient 625px.

Les étiquettes sur 1+ lignes sont excellentes. Est-il possible de forcer les sauts de ligne ? Par exemple 2014-10-22 \n 2014-10-15 \n 2014-10-08 ?

Il semble ne pas se réveiller dans les violons. Qu'en est-il du code réel ? Ça marche pour moi. Et s'il vous plaît, définissez axis.x.tick.multiline = false pour qu'il s'affiche sur une seule ligne. Maintenant, le multiligne est par défaut.

Je pense qu'il semble raisonnable d'introduire quelque chose pour forcer les sauts de ligne. Je mettrai en œuvre si besoin.

Je pense qu'il semble raisonnable d'introduire quelque chose pour forcer les sauts de ligne. Je mettrai en œuvre si besoin.

Oui. Avait besoin.

des plans pour ça ?

@laurabrooks Je ne sais pas à quoi vous faites référence avec "cela", mais axis.x.tick.multiline est implémenté depuis un certain temps et j'ai récemment introduit la prise en charge de axis.x.tick.multilineMax et ajouté de la documentation pour les deux (voir ici ), j'espère que cela aide.

Je me demandais s'il fallait forcer un saut de ligne à un point spécifié dans le texte de l'étiquette. les attributs multiline et multilineMax feront l'affaire, merci pour la réponse @jcsmorais

Hé, y a-t-il une disposition pour les étiquettes d'axe multilignes ?

Je ferme ce problème car des options multilignes existent déjà. Veuillez vous référer aux documents qui ont été déclarés par @jcsmorais.

Cette page vous a été utile?
0 / 5 - 0 notes