Flotはそれ自体では軸ラベルをサポートしていませんが、htmlとcssを使用して軸ラベルをかなり簡単に追加でき、flotオプションに少し変更を加えることができます。
flotサイトのデモにはayaxisラベルが付いています。これは、特定のクラスを持つdivをflotコンテナに追加することによって作成されます。
var xaxisLabel = $("<div class='axisLabel xaxisLabel'></div>")
.text("My X Label")
.appendTo($('#placeholder_1w'));
var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
.text("Response Time (ms)")
.appendTo($('#placeholder_1w'));
次に、次のようなCSSが必要です。
.axisLabel {
position: absolute;
text-align: center;
font-size: 12px;
}
.xaxisLabel {
bottom: 3px;
left: 0;
right: 0;
}
.yaxisLabel {
top: 50%;
left: 2px;
transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
IE6 / 7をサポートする必要がある場合は、残念ながらさらに注意が必要です。次のようにして、bodyタグに「ie6」または「ie7」のクラスのラベルを付ける必要があります。
<!--[if IE 6]><body class="ie ie6"><![endif]-->
<!--[if IE 7]><body class="ie ie7"><![endif]-->
<!--[if IE 8]><body class="ie ie8"><![endif]-->
<!--[if IE 9]><body class="ie ie9"><![endif]-->
<!--[if gt IE 9]><body class="ie"><![endif]-->
<!--[if !IE ]><!--><body><!--<![endif]-->
そして、この追加のCSS:
.ie7 .yaxisLabel, .ie8 .yaxisLabel {
top: 40%;
font-size: 36px;
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.33, M21=-0.33, M22=0.0,sizingMethod='auto expand');
}
最後に、これを実行しようとすると、y軸に固定のlabelWidthを指定し、x軸に固定のlabelHeightを指定する必要があることがわかりました。
ここで実際の例を参照してください:http: //jsfiddle.net/ryleyb/U82Dc/