web-dev-qa-db-fra.com

Etiquette d'axe en Flot

Est-ce que quelqu'un sait comment on peut définir l'étiquette ou le titre d'un axe dans Flot?

J'ai lu l'API mais il ne semble pas avoir cette fonctionnalité ...

Merci :)

javascriptflot
47
Nobita

Il n'y a pas intégré à flot.

Votre meilleur pari est de le faire vous-même via des div positionnés, mais si vous êtes aventureux, vous pouvez regarder le issue (ou le issue ) original et voir comment d’autres personnes l’ont traitée.

Plus précisément, deux personnes ont récemment apporté des modifications à l'étiquette liées à l'étiquette:

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

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

37
Ryley

j'utilise cette solution de contournement:

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

Très simple, la valeur maximale sur l'axe des ordonnées est remplacée par une chaîne personnalisée. Je n'ai pas testé l'axe X, mais je ne vois pas pourquoi cela ne fonctionnerait pas.

36
Mishami

Auto-plug éhonté: j'ai corrigé et grandement étendu le plugin flot-axislabels de xuanluo: http://github.com/markrcote/flot-axislabels/ Pour autant que je sache, c'est la meilleure solution pour les étiquettes d'axe au moment.

35
Mark

Une suggestion que j’ai vue qui fonctionne assez bien est de placer le graphique au milieu d’un tableau 3x3. Ensuite, les étiquettes peuvent être placées dans les autres cellules.

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

Exemple de graphe à 2 dimensions (axes x et y) résolu en css pur.

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

Axe X:

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

jqPlot a un support pour cela, si vous pouvez utiliser une alternative

http://www.jqplot.com

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

Cela fonctionnera aussi.

0
szpapas

J'utilise l'idée de szpapas.

J'ai ajouté plus de code jquery en dessous pour écraser l'axe des abscisses comme ceci.

            $('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")
0
Apit John Ismail