¿Cómo controlo el tamaño de la etiqueta de marca en flot?

Question

Tengo un gráfico de barras básico que estoy presentando en flot (5 barras, mostrando el% por estado).

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

Me parece que la fuente utilizada para los valores de tick en el eje x es demasiado grande, especialmente cuando el gráfico se muestra en pequeñas dimensiones, es decir. 240x100. He leído la documentación de la API, pero no puedo encontrar cómo controlar los tamaños de las etiquetas de verificación.

¿Es esto posible OOTB?

Answer 1

No parece que pueda establecer el tamaño de fuente a través de la API, pero puede usar css para establecer el tamaño de las etiquetas de marca.

.tickLabel { font-size: 80% }

Answer 2

Aquí hay un ejemplo directamente de la 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

Las dos respuestas anteriores no funcionarán en la última versión de flot, ya que ya no usan texto 'real' (el texto se dibuja en su lugar). En su lugar, especifique estas opciones:

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

(reemplace some_number con el tamaño deseado en puntos)

Answer 4

Usé lo siguiente:

Archivo CSS / Archivo SCSS

#graph_label .tickLabel{

     font-size: 50%;
  }

Index.html o lugar donde está trazando el área del gráfico

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

Ref: Respuesta de @BrentM arriba

PD: Estoy usando Flot Version anterior a 0.8.1, así que no tengo idea de cómo funcionaría la última versión