Comment puis-je contrôler la taille de l'étiquette de coutil dans flot

Question

Je présente un graphique à barres de base (5 barres, affichant le% par statut).

$.plot($("#placeholder"), [
    {
        label: 'Failed',
        data: [[0,10]],
        bars: { show: true }
    },
    {
        label: 'Passed',
        data: [[1,15]],
        bars: { show: true }
    },
    {
        label: 'Not Run',
        data: [[2,30]],
        bars: { show: true }
    },
    {
        label: 'Blocked',
        data: [[3,5]],
        bars: { show: true }
    },
    {
        label: 'In Progress',
        data: [[4,40]],
        bars: { show: true }
    }
],
{
    xaxis: {
        ticks: [[0.5, "Failed"], [1.5, "Passed"], [2.5, "Not Run"], [3.5, "Blocked"], [4.5, "In Progress"]]
    },
    legend: {
        show: false
    }
});

Je trouve que la police utilisée pour les valeurs de tick sur l’axe x est un peu trop grosse, en particulier lorsque le graphique est affiché en petites dimensions, c’est-à-dire. 240x100. J'ai lu la documentation de l'API, mais je ne trouve pas comment contrôler la taille des étiquettes de tick.

Est-ce possible OOTB?

Answer 1

Il ne semble pas que vous puissiez définir la taille de la police via l'API, mais vous pouvez utiliser css pour définir la taille des libellés de ticks.

.tickLabel { font-size: 80% }

Answer 2

Voici un exemple directement tiré de l'API:

xaxis:{
   font:{
      size:11,
      style:"italic",
      weight:"bold",
      family:"sans-serif",
      variant:"small-caps"
   }
}

http://flot.googlecode.com/svn/trunk/API.txt

Answer 3

Les deux réponses ci-dessus ne fonctionneront pas avec la dernière version de flot, car elles n'utilisent plus de texte "réel" (le texte est dessiné à la place). Spécifiez plutôt ces options à la place:

{xaxis: {font: taille: un_numéro}, yaxis: {police: taille: un_numeau}}

(remplacez numéro_quelques par la taille souhaitée en points)

Answer 4

J'ai utilisé les éléments suivants:

Fichier CSS / Fichier SCSS

#graph_label .tickLabel{

     font-size: 50%;
  }

Index.html ou le lieu où vous tracez la zone graphique

$.plot($("graph_label"), [dataArrayReference], options);

Réf.: La réponse de @BrentM ci-dessus

PS: j'utilise la version Flot antérieure à la version 0.8.1, je n'ai donc aucune idée du fonctionnement de la dernière version