Tytuł osi X i Y na wykresie Flot

Czy można wyświetlić tytuł dla osi X i Y na wykresie flot?Tytuł osi X i Y na wykresie Flot

Poniżej znajduje się kod:

$.plot($("#placeholder_1w"), [d], { 
     series: { 
     lines: { show: true, fill: false, fillColor: "red" }, 
     points: { show: true, fill: true,fillColor: "red" } 
    }, 
     grid: { hoverable: true, clickable: true , color: 'green'}, 
     xaxis: { 
      mode: "time", 
      minTickSize: [1, "day"], 
      min: (myWeekDate).getTime(), 
      max: (new Date()).getTime() 
     }, 
     colors: ["red", "green", "#919733"] 
    });

Źródło

2012-12-11 user1871640

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

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/

Źródło

2012-12-11 17:18:05 Ryley

Jest to plugin dla flot tutaj: https://github.com/mikeslim7/flot-axislabels do wprowadzania etykiety osi.

Jednak nie jest obsługiwany w przeglądarkach IE mniejszych niż wersja 9.0. Rozwiązanie @ Ryleya jest fajne.

Źródło

2013-01-08 09:46:21 Bimal

Ta wtyczka jest bardziej aktualny: https://github.com/markrcote/flot-axislabels – cederlof

dzięki @merylof uratowałeś mój dzień Bimal ten plugin jest stary i mający problemy z moim problemem rozwiązanym przez użycie github.com/markrcote/flot-axislabels –

Tytuł osi X i Y na wykresie Flot

Odpowiedz

Powiązane problemy