Flot nie obsługuje etykiet osi sama, ale można dość łatwo dodać je za pomocą HTML i CSS, a trochę modyfikacji do swoich flot opcji.
Demo na flot site ma etykietę osi y. Jest ona tworzona przez dołączanie div z niektórych klas z Flot pojemniku:
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'));
Następnie trzeba CSS tak:
.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;
}
Jeśli trzeba wspierać IE6/7, nie więcej oszustwo do zajmować się niestety - że chcesz tag ciało być oznakowane z klasą „IE6” lub „IE7” robiąc coś takiego:
<!--[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]-->
A potem ta dodatkowa 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');
}
Wreszcie, w moich próbach, aby to zrobić, znalazłem, że muszę podać stałą labelWidth na osi y oraz ustaloną labelHeight dla Xaxis.
Zobacz przykład pracuje tu: http://jsfiddle.net/ryleyb/U82Dc/
Oprócz odpowiedzi @ Ryleya, dostępna jest również wtyczka: https://github.com/markrcote/flot-axislabels – Mark
@ Mark - zrób odpowiedź, zagłosowałbym na to :) – Ryley