jQuery flot: diagramme en barres avec de très longues étiquettes de l'axe des

Je suis en train de mettre en œuvre un diagramme à barres avec jQuery-plugin flot. J'ai pour afficher les étiquettes au lieu de nombres sur l'axe des x, et ces étiquettes peuvent être très longues.

Je suis capable de faire tourner les étiquettes à l'aide de CSS, de sorte qu'ils ne se chevauchent pas:

.flot-x-axis div.flot-tick-label { 
    /* Rotate Axis Labels */
    transform: translateX(50%) rotate(20deg); /* CSS3 */
    transform-origin: 0 0;

    -ms-transform: translateX(50%) rotate(20deg); /* IE */
    -ms-transform-origin: 0 0;

    -moz-transform: translateX(50%) rotate(20deg); /* Firefox */
    -moz-transform-origin: 0 0;

    -webkit-transform: translateX(50%) rotate(20deg); /* Safari and Chrome */
    -webkit-transform-origin: 0 0;

    -o-transform: translateX(50%) rotate(20deg); /* Opera */
    -o-transform-origin: 0 0;
}

Cependant, l'utilisation de cette solution, je reçois un unestetical espace vide entre l'axe des y et ses étiquettes. Voir http://jsfiddle.net/QQkfy/2/

C'est probablement parce que l'étiquette sont à l'origine (c'est à dire pré-CSS modifications) centré sous les barres. Des Idées comment pourrais-je résoudre ce problème?

OriginalL'auteur Giacomo d'Antonio | 2013-05-31

  1. 8

    D'essayer de changer le labelWidth pour l'axe des abscisses.
    Se les Flots de la documentation: https://github.com/flot/flot/blob/master/API.md

    xaxis: {
  tickLength: 0,
  ticks: ticks,
  min: -0.5, 
  max: 6.5,
  labelWidth: 30
}
    Il fonctionne! Merci.
    Cela a fonctionné dans mon cas. Merci!

    OriginalL'auteur anderssonola

  2. 2

    si vous souhaitez corriger l'axe y de l'étiquette de la question et ne voulez pas avoir l'axe x de l'étiquette enveloppé, de style css
    white-space: nowrap; aidera.

    Voir http://jsfiddle.net/vincentwang/Y4KTT/

    Génial! Merci beaucoup!

    OriginalL'auteur Vincent