Come controllo la dimensione dell'etichetta tick in flot

Question

Ho un grafico a barre di base che sto presentando in flot (5 barre, con visualizzazione% per stato).

$.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
    }
});

Sto trovando che i caratteri utilizzati per i valori di spunta sull'asse x sono un po 'troppo grandi, specialmente quando il grafico viene visualizzato a dimensioni ridotte, ad es. 240x100. Ho letto la documentazione dell'API, ma non riesco a trovare il modo di controllare le dimensioni dell'etichetta di spunta.

È possibile OOTB?

Answer 1

Non sembra che tu possa impostare la dimensione del carattere tramite l'API, ma puoi usare css per impostare la dimensione delle etichette tick.

.tickLabel { font-size: 80% }

Answer 2

Ecco un esempio direttamente dall'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

Le due risposte precedenti non funzionano sull'ultima versione di flot, in quanto non usano più il testo "reale" (il testo viene invece disegnato). Invece specifica queste opzioni:

{xaxis: {font: size: some_number}, yaxis: {font: size: some_number}}

(sostituisci some_number con la dimensione desiderata in punti)

Answer 4

Ho usato quanto segue:

File CSS / File SCSS

#graph_label .tickLabel{

     font-size: 50%;
  }

Index.html o luogo in cui si sta disegnando l'area del grafico

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

Rif: la risposta di @BrentM sopra

PS: sto usando Flot Version precedente alla 0.8.1, quindi non ho idea di come funzionerebbe l'ultima versione