Wie kontrolliere ich die Beschriftung Größe in flot

Habe ich eine grundlegende Balkendiagramm ich präsentiere in flot (5 Bar, Anzeige der % pro-status).

$.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 tick-Werte auf der x-Achse sind ein wenig zu groß, vor allem, wenn der graph angezeigt, bei kleinen Abmessungen, dh. 240x100. Ich habe gelesen, die API-Dokumentation, aber kann nicht herausfinden, wie die Kontrolle der tick label-Größen.

Ist dies möglich OOTB?

Jede chance, die Sie könnten, veröffentlichen Sie die aktualisierte und korrigierte Lösung? Ich habe versucht, das hinzufügen dieses 'grid: { hoverable: false, clickable: false, .tickLabel { font-size: 80% } }", um mein Diagramm, aber es Bomben aus.
Sie müssen hinzufügen .tickLabel zu Ihr cascading style sheet (CSS), nicht als Teil des json übergeben Sie die flot nennen.

InformationsquelleAutor Bittercoder | 2009-01-20

  1. 18

    Nicht angezeigt Sie können die Schriftgröße über die API, aber Sie können css verwenden, um die Größe der hilfsstriche.

    .tickLabel { font-size: 80% }
    Ja, ich fand diese mir selbst aber vergessen zu follow-up durch die Schließung dieser Frage. Die CSS-änderungen haben einige "interessante" Effekte im IE beim Zoomen einer Seite bis zu sagen 120% leider - obwohl IE ist das nicht ein toller Kandidat für flot in den besten Zeiten wirklich!!!! Danke für die Bestätigung!
    wo muss ich diese änderung vornehmen @BrentM
    in der CSS-Datei.
    Auch können Sie kontrollieren, y-oder x-label : .flot-y-axis .tickLabel { font-size: 9px } .flot-x-axis .tickLabel { font-size: 12px }

    InformationsquelleAutor

  2. 10

    Hier ein Beispiel direkt aus der API:

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

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

    InformationsquelleAutor Shun Takeda

  3. 6

    Den beiden oben genannten Antworten funktionieren nicht auf der neuesten version von flot, da Sie nicht mehr verwenden "real" - text (der text ist gezeichnet statt). Stattdessen legen Sie die folgenden Optionen:

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

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

    Für die Kompatibilität mit Flot 0,7 und früher die Etiketten sind auch angesichts der 'tickLabel' - Klasse, aber diese ist veraltet und geplant entfernt werden mit dem release der version 1.0.0
    Auch die neueste version verwendet immer noch den 'echten' text standardmäßig. Sobald Sie die 'Leinwand' plugin der default scheint zu wechseln (das scheint nicht dokumentiert zu werden).

    InformationsquelleAutor Joel Cross

  4. 1

    Ich Folgendes:

    CSS-Datei/SCSS-Datei

    #graph_label .tickLabel{

     font-size: 50%;
  }

    Index.html oder Ort, wo Sie sind Plotten der Graphen Bereich

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

    Ref: @BrentM 's Antwort Oben

    PS: ich bin mit Flot Version vor Version 0.8.1 also ich habe keine Idee, wie die neueste version funktionieren würde

    InformationsquelleAutor madLokesh

Schreibe einen Kommentar