Axis label in Flot

问题:

Does anyone know how one can set the label or title of an axis in Flot?

I've read the API but it doesn't seem to have that feature...

Thanks :)

回答1:

There are none built-in to flot.

Your best bet is to do it yourself via positioned divs, but if you are adventurous, you can look at the issue (Or the original issue) and see how other people have dealt with it.

Specifically, there are two people who have recently made label-related revisions to flot:

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

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

回答2:

i'm using this workaround:

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

Very simple, the max value on the Y axis is replaced by a custom string. I've not tested on the X axis, but I see no reason why it shouldn't work.

回答3:

Shameless self-plug: I fixed and greatly extended xuanluo's flot-axislabels plugin: http://github.com/markrcote/flot-axislabels/ As far as I know, it is the best solution for axis labels at the moment.

回答4:

A suggestion I saw that works pretty well is to put the graph in the middle of a 3x3 table. Then the labels can be put in the others cells.

<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>

回答5:

Example for 2dims graph (x and y axis) solved with pure css.

Y axis:

#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 axis:

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

回答6:

jqPlot has support for this, incase you're able to use an alternative

http://www.jqplot.com

回答7:

This one has fixes for using multiple axes and the offset works well too... https://github.com/mikeslim7/flot-axislabels

回答8:

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

This will works too.

回答9:

I use szpapas idea.

I added more jquery code below it to overwrite x-axis like this.

            $('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")