Wie steuere ich die Zecke Etikettengröße in flicht

Question

Ich habe eine grundlegende Balkendiagramm I in flicht (5 bar, das% pro Status anzeigt) präsentierte.

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

Ich finde die Schriftart für die Zecke Werte auf der x-Achse verwendet, ein wenig zu groß sind, vor allem, wenn das Diagramm angezeigt wird bei kleinen Abmessungen, dh. 240x100. Ich habe die API-Dokumentation zu lesen, aber nicht finden kann, wie die Zecke Etikettengrößen zu steuern.

Ist das möglich OOTB?

Answer 1

Es scheint nicht die Schriftgröße über die API einstellen kann, aber Sie können CSS verwenden, um die Größe der Zecke Etiketten zu setzen.

.tickLabel { font-size: 80% }

Answer 2

Hier ist ein Beispiel direkt von der 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

Die beiden oben genannten Antworten werden nicht auf die neueste Version von flicht arbeiten, da sie nicht mehr ‚echte‘ verwenden, um Text (der Text gezeichnet statt). angeben Anstatt diese Optionen:

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

(replace some_number mit der gewünschten Größe in Punkten)

Answer 4

ich verwendet, um die folgenden:

CSS-Datei / SCSS Datei

#graph_label .tickLabel{

     font-size: 50%;
  }

Index.html oder Ort, an dem Sie den Diagrammbereich plotten

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

Ref: @BrentM ‚s Antwort oben

PS: Ich bin mit Flot Version vor 0.8.1 so ich habe keine Ahnung, wie neueste Version funktionieren würde