Dans Flot, est-il possible d'éliminer ou de masquer les ticks de la grille sans éliminer l'étiquette correspondante?

StackOverflow https://stackoverflow.com/questions/169894

  •  05-07-2019
  •  | 
  •  

Question

La documentation de l'API Flot décrit les nombreux points d'ancrage de la bibliothèque pour personnaliser les axes. d'un graphique. Vous pouvez définir le nombre de graduations, leur couleur, etc. séparément pour chaque axe. Cependant, je ne peux pas comprendre comment empêcher Flot de tracer les lignes verticales de la grille sans supprimer également les étiquettes de l'axe des x. J'ai essayé de changer les options tickColor, ticks et tickSize sans succès.

Je souhaite créer de superbes graphes compatibles Tufte, tels que:

http://www.robgoodlatte.com/wp-content/uploads/2007/05/tufte_mint .gif http://www.argmax.com/mt_blog/archive/RealGDP_graph.jpg

Je trouve que les graduations verticales sur mes graphiques sont indésirables. Je travaille avec une série chronologique que je présente sous forme de barres verticales, de sorte que les graduations verticales coupent souvent les barres de manière visuellement bruyante.

Était-ce utile?

La solution

Comme Laurimann l’a noté, Flot continue d’évoluer. La possibilité de contrôler cela a été ajoutée à l’API (comme indiqué dans l’affaire de flot liée à Nelson).

Si vous téléchargez la dernière version (qui porte toujours la mention 0.6), vous pouvez désactiver les lignes d'un axe avec "tickLength", comme suit: 

xaxis: {
  tickLength: 0
}

Plutôt ennuyeux, cet ajout n'a pas été mis à jour dans la documentation de l'API.

Autres conseils

Cet article arrive deux ans plus tard après OP et Flot (maintenant la version 0.6) a peut-être beaucoup évolué pendant cette période ou peut-être y a-t-il de meilleures options que cela, mais dans les deux cas, voici ma contribution.

J'ai accidentellement heurté une solution de contournement pour résoudre ce problème: définissez le canal alpha de la couleur de graduation de la grille sur une transparence totale. Par exemple: 

var options =   {
      grid:   {show: true,
               color: "rgb(48, 48, 48)",
               tickColor: "rgba(255, 255, 255, 0)",
               backgroundColor: "rgb(255, 255, 255)"}
    };

Fonctionne pour moi.

Après quelques recherches, je suis à peu près sûr que ce n’est pas possible avec l’API Flot. Néanmoins, si vous êtes vraiment sale, vous pouvez le faire. J'ai publié une version modifiée d'un exemple qui le fait. Voir la source montre toute la laideur.

Pour éviter les ticks dans les options, il suffit de donner des ticks: [] dans l’axe correspondant

À partir du mois de juin 2009, le numéro 167 de Flot est une demande pour cette fonctionnalité exacte. Inclut deux implémentations et un accord de l’auteur de la firme sur le fait que c’est une bonne idée.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top