web-dev-qa-db-ja.com

Flotの軸ラベル

誰もがFlotで軸のラベルまたはタイトルを設定する方法を知っていますか？

APIを読みましたが、その機能はないようです...

ありがとう：）

javascriptflot
48
Nobita

組み込みのフロットはありません。

あなたの最善の策は、配置されたdivを介して自分でそれを行うことですが、あなたが冒険好きなら、 issue （または元の issue ）を見て、他の人がどのように持っているかを見ることができますそれに対処しました。

具体的には、最近、ラベルに関連するflotの改訂を行った2人の人々がいます。

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

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

37
Ryley

私はこの回避策を使用しています：

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

非常に簡単で、Y軸の最大値はカスタム文字列に置き換えられます。 X軸でテストしたことはありませんが、動作しない理由はわかりません。

36
Mishami

恥知らずの自己プラグイン：xuanluoのflot-axislabelsプラグインを修正し、大幅に拡張しました： http://github.com/markrcote/flot-axislabels/ 私の知る限り、それは軸の最適なソリューションです現時点でのラベル。

35
Mark

かなりうまくいくと私が見た提案は、グラフを3x3テーブルの中央に置くことです。次に、ラベルを他のセルに配置できます。

<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

純粋なcssで解決された2次元グラフ（xおよびy軸）の例。

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

X軸：

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

jqPlotはこれをサポートしていますが、代替手段を使用できる場合

http://www.jqplot.com

1
Muers

これには複数の軸を使用するための修正があり、オフセットもうまく機能します... https://github.com/mikeslim7/flot-axislabels

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

これも機能します。

0
szpapas

私はszpapasのアイデアを使用します。

このようにx軸を上書きするために、その下にjqueryコードを追加しました。

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