javascript - property - title label html

Etiqueta del 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 parece tener esa característica ...

Gracias :)

Answer 1

Auto-plug desvergonzado: arreglé y extendí enormemente el plugin flot-axislabels de xuanluo: http://github.com/markrcote/flot-axislabels/ Por lo que sé, es la mejor solución para las etiquetas de ejes en este momento.

Answer 2

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

Eje Y:

#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);
}

Eje X:

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

Answer 3

Este tiene correcciones para el uso de varios ejes y el desplazamiento también funciona bien ... https://github.com/mikeslim7/flot-axislabels

Answer 4

Estoy usando esta solución:

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 5

No hay ninguno incorporado a flot.

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

Específicamente, hay dos personas que recientemente han hecho revisiones relacionadas con la etiqueta de flot:

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

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

Answer 6

Una sugerencia que vi que funciona bastante bien es colocar el gráfico en medio de una tabla de 3x3. Luego 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 7

Yo uso la idea de szpapas.

Agregué 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")

Answer 8

jqPlot tiene soporte para esto, en caso de que puedas usar una alternativa

http://www.jqplot.com

Answer 9

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

Esto funcionará también.