Etiqueta de eje en Flot

Question

¿Alguien sabe cómo se puede establecer la etiqueta o el título de un eje en Flot?

He leído la API pero no parecen tener esa característica ...

Gracias :)

Answer 1

No hay ninguno integrado en Flot.

Lo mejor que puedes hacer es hacerlo tú mismo a través de divs posicionados, pero si eres aventurero, puedes mirar el issue (o el original issue) y ver cómo otras personas lo han solucionado.

En concreto, hay dos personas que recientemente han hecho las revisiones relacionadas con la etiqueta-a FLOT:

https://github.com/RuiPereira/flot/raw/axislabels/jquery.flot.axislabels.js

http://github.com/xuanluo/flot-axislabels

Answer 2

jqPlot tiene soporte para esto, en caso que usted es capaz de utilizar una alternativa

http://www.jqplot.com

Answer 3

estoy usando este workarou nd:

yaxis: { 
tickFormatter: function(val, axis) { return val < axis.max ? val.toFixed(2) : "CZK/l";} 
} 

Muy simple, el valor máximo en el eje Y se reemplaza por una cadena personalizada. No he probado en el eje X, pero no veo ninguna razón por la que no debería funcionar.

Answer 4

Autoadhesivo shameless: he reparado y ampliado mucho el plugin flot-axislabels de xuanluo: http://github.com/markrcote/flot-axislabels/ Por lo que sé, es la mejor solución para etiquetas de ejes en este momento.

Answer 5

Una sugerencia que vi que funciona bastante bien es poner el gráfico en el medio de una tabla de 3x3. Entonces las etiquetas se pueden poner en las otras celdas.

<table style="text-align:center"> 
    <tr> 
    <td></td> 

    <td>Plot Title Goes Here</td> 

    <td> </td> 
    </tr> 

    <tr> 
    <td>Y Axis Label</td> 

    <td> 
     <div id="graph here" style="width:600px;height:300px"></div> 
    </td> 

    <td></td> 
    </tr> 

    <tr> 
    <td></td> 

    <td>X Axis Label Goes Here</td> 

    <td></td> 
    </tr> 

</table> 

Answer 6

$("<div class='axisLabel yaxisLabel'></div>") 
     .text("Pressure") 
     .appendTo($("#yl_1")); 

Esta voluntad también funciona.

Answer 7

Éste tiene correcciones para el uso de múltiples ejes y el desplazamiento funciona bien también ... https://github.com/mikeslim7/flot-axislabels

Answer 8

Ejemplo para 2dims gráfico (x y el eje y) resuelto con css puro.

eje Y: eje

#placeholder:after { 
    content: 'Speed'; 
    position: absolute; 
    top: 50%; 
    left: -50px; 
    font-weight: 600; 
    /* Safari */ 
    -webkit-transform: rotate(-90deg); 
    /* Firefox */ 
    -moz-transform: rotate(-90deg); 
    /* IE */ 
    -ms-transform: rotate(-90deg); 
    /* Opera */ 
    -o-transform: rotate(-90deg); 
    /* Internet Explorer */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

X:

#placeholder:before { 
    content: 'Time'; 
    position: absolute; 
    bottom: -30px; 
    left: 50%; 
    font-weight: 600; 
} 

Answer 9

I utilizan idea szpapas.

He añadido más código jquery debajo para sobrescribir el eje x de esta manera.

  $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(1)').html("Berhad") 
      $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(2)').html("") 
      $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(3)').html("Sdn Bhd") 
      $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(4)').html("") 
      $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(5)').html("Enterprise") 
      $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(6)').html("") 
      $('div.flot-x-axis div.flot-tick-label.tickLabel:nth-child(7)').html("Koperasi")