Como faço para controlar o tamanho da etiqueta tick em flot

Question

Eu tenho um gráfico de barras básico que eu estou apresentando em flot (5 bares, exibindo o% ao 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
    }
});

Eu estou achando a fonte usada para os valores de escala no eixo x são um pouco grande demais, especialmente quando o gráfico é apresentado em pequenas dimensões, ou seja. 240x100. Eu li a documentação da API, mas não consigo encontrar como controlar os tamanhos de etiquetas carrapato.

Isso é possível OOTB?

Answer 1

Não parece que você pode definir o tamanho da fonte por meio da API, mas você pode usar css para definir o tamanho das etiquetas de carrapatos.

.tickLabel { font-size: 80% }

Answer 2

Aqui está um exemplo directamente a partir da 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

O acima duas respostas não irá funcionar na versão mais recente do flot, como eles já não uso de texto 'real' (o texto é desenhado em vez disso). Em vez disso especificar essas opções:

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

(substituir some_number com o tamanho desejado, em pontos)

Answer 4

Eu usei o seguinte:

CSS File / SCSS Arquivo

#graph_label .tickLabel{

     font-size: 50%;
  }

index.html ou o local onde você está tramando área do gráfico

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

Ref: @BrentM 's resposta acima

PS: Estou usando Flot versão anterior a 0.8.1, então eu não tenho nenhuma idéia sobre como última versão iria trabalhar