Ярлыки флота, перекрывающиеся с моим графиком

Question

Я использую функцию линейного графика для флота, но у меня возникают трудности с совпадением меток на оси x и y на графике. Мой график выглядит следующим образом

В идеале я хотел бы переместить метки слева и внизу, так что они не пересекаются с графиком. Я построение графа как так

$(function() { 

<% 
    js_data = [] 
    ids = [] 
    @user_my_objects.each do |user_my_object| 
    ids.push(user_my_object.id) 
    my_object_day_time_in_ms = user_my_object.my_object.day.strftime('%Q') 
    js_data.push("[#{my_object_day_time_in_ms}, #{user_my_object.time_in_ms}]") 
    end 
%> 
     // <%= ids %> 
     var data = [<%=h js_data.join(",") %>]; 

     $("<div id='tooltip'></div>").css({ 
       position: "absolute", 
       display: "none", 
       border: "1px solid #fdd", 
       padding: "2px", 
       "background-color": "#fee", 
       opacity: 0.80 
     }).appendTo("body"); 

     $.plot("#placeholder", [data], { 
       yaxis: { 
         tickFormatter: formatTime 
       }, 
       xaxis: { mode: "time" }, 
       points: { 
         show: true 
       }, 
       lines: { 
         show: true 
       }, 
       grid: { 
         hoverable: true, 
         clickable: true, 
         tickColor: "#efefef", 
         borderWidth: 0, 
         borderColor: "#efefef" 
       }, 
       tooltip: true 
     }); 

     $("#placeholder").bind("plothover", function (event, pos, item) { 
       if (item) { 
         var x = item.datapoint[0].toFixed(2), 
           y = item.datapoint[1].toFixed(2); 

         console.log("x:" + x) 
         dateObj = new Date(parseInt(x)) 
         var dateStr = $.datepicker.formatDate('MM dd, yy', dateObj) 
         $("#tooltip").html(dateStr + " - " + formatTime(y)) 
           .css({top: item.pageY+5, left: item.pageX+5}) 
           .fadeIn(200); 
       } else { 
         $("#tooltip").hide(); 
       } 
     }); 

}); 

Edit: Увы неуловимый Fiddle - http://jsfiddle.net/edc8jd31/1/

Answer 1

Начиная формировать свою скрипку, добавьте translateY(15px) к transform строк в CSS и добавить labelHeight: 30 к xaxis опции. Полный пример приведен в updated fiddle.

Объяснение:
При использовании transform: rotate(45%) на ось этикетке вы вращаете их вокруг своих центров, которые приносят левую половину выше осей. Дополнительный перевод перемещает метку под осью. Опция labelHeight необходима, чтобы правая половина меток не опускалась ниже края диаграммы.

Answer 2

Я не совсем уверен, если я понимаю вашу проблему правильно, но вы просто хотите переместить метки на оси x и z, не перемещая сам график, правильно?

Может быть, для x-Axis вам подходит CSS3 свойство transform: translate(x, y);.

И для y-оси вы теоретически можете сделать то же самое, но для перемещения по краю было бы лучше.

Для ротации этикеток используют transform: rotate(degrees)

Так что это может быть может работать:

#placeholder div.yAxis div.tickLabel 
{ 
    transform: translate(-10px, 0px); 
} 

#placeholder div.xAxis div.tickLabel 
{ 
    margin-top: 20px; 
    transform: rotate(45deg); 
} 

Answer 3

Пожалуйста, добавьте следующую строку в ваш CSS:

#placeholder div.xAxis div.tickLabel { 
    transform: rotate(0deg) !important; 
    margin-top:10px; 
} 

#placeholder div.yAxis div.tickLabel { 
    margin-right: 10px !important; 
} 

Выход:

Answer 4

Я не уверен, что понял вашу проблему, но вы ожидаете чего-то подобного?
Используется простой jQuery для изменения css каждой оси X div.

JQuery:

$('.xAxis.x1Axis div.tickLabel').each(function() { 

    var newVal = $(this).css('left'); 
    newVal = parseInt(newVal.substring(0, newVal.indexOf("px"))) + 15; 
    $(this).css('left', newVal); 

    //$(this).css('top', "492px"); 
    // Instead of above commented line You can use css directly. 

}); 

CSS:

.xAxis.x1Axis .tickLabel 
{ 
    top :492px !important; 
} 

function formatTime(duration) { 
 
    var milliseconds = parseInt((duration % 1000)/100), 
 
    seconds = parseInt((duration/1000) % 60), 
 
    minutes = parseInt((duration/(1000 * 60)) % 60), 
 
    hours = parseInt((duration/(1000 * 60 * 60)) % 24); 
 

 
    hours = (hours < 10) ? "0" + hours : hours; 
 
    minutes = (minutes < 10) ? "0" + minutes : minutes; 
 
    seconds = (seconds < 10) ? "0" + seconds : seconds; 
 

 
    return (hours > 0 ? hours + ":" : "") + minutes + ":" + seconds + (milliseconds > 0 ? "." + milliseconds : ""); 
 
} 
 

 
$(function() { 
 

 
    // [4775444, 4775496, 4775541] 
 
    var data = [ 
 
    [1403913600000, 2915000], 
 
    [1437782400000, 2788000], 
 
    [1466812800000, 2759000] 
 
    ]; 
 

 
    $("<div id='tooltip'></div>").css({ 
 
    position: "absolute", 
 
    display: "none", 
 
    border: "1px solid #fdd", 
 
    padding: "2px", 
 
    "background-color": "#fee", 
 
    opacity: 0.80 
 
    }).appendTo("body"); 
 

 
    $.plot("#placeholder", [data], { 
 
    yaxis: { 
 
     tickFormatter: formatTime 
 
    }, 
 
    xaxis: { 
 
     mode: "time" 
 
    }, 
 
    points: { 
 
     show: true 
 
    }, 
 
    lines: { 
 
     show: true 
 
    }, 
 
    grid: { 
 
     margin: 10, 
 
     labelMargin: 5, 
 
     labelWidth: 20, 
 
     hoverable: true, 
 
     clickable: true, 
 
     tickColor: "#efefef", 
 
     borderWidth: 0, 
 
     borderColor: "#efefef" 
 
    }, 
 
    tooltip: true 
 
    }); 
 

 
    $("#placeholder").bind("plothover", function(event, pos, item) { 
 
    if (item) { 
 
     var x = item.datapoint[0].toFixed(2), 
 
     y = item.datapoint[1].toFixed(2); 
 

 
     console.log("x:" + x) 
 
     dateObj = new Date(parseInt(x)) 
 
     var dateStr = $.datepicker.formatDate('MM dd, yy', dateObj) 
 
     $("#tooltip").html(dateStr + " - " + formatTime(y)) 
 
     .css({ 
 
      top: item.pageY + 5, 
 
      left: item.pageX + 5 
 
     }) 
 
     .fadeIn(200); 
 
    } else { 
 
     $("#tooltip").hide(); 
 
    } 
 
    }); 
 

 
    $('.xAxis.x1Axis div.tickLabel').each(function() { 
 

 
    var newVal = $(this).css('left'); 
 
    newVal = parseInt(newVal.substring(0, newVal.indexOf("px"))) + 15; 
 
    $(this).css('left', newVal); 
 

 
    //$(this).css('top', "492px"); 
 
    // instead of hardcoding you can apply via css: 
 

 
    }); 
 

 
});

.demo-container { 
 
    padding: 20px; 
 
    background-color: orange; 
 
} 
 
#placeholder div.xAxis div.tickLabel { 
 
    transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    /* IE 9 */ 
 
    -moz-transform: rotate(45deg); 
 
    /* Firefox */ 
 
    -webkit-transform: rotate(45deg); 
 
    /* Safari and Chrome */ 
 
    -o-transform: rotate(-90deg); 
 
    /* Opera */ 
 
    /*rotation-point:50% 50%;*/ 
 
    /* CSS3 */ 
 
    /*rotation:270deg;*/ 
 
    /* CSS3 */ 
 
} 
 

 
.xAxis.x1Axis .tickLabel 
 
{ 
 
    top :492px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script> 
 

 
<div class="demo-container"> 
 
    <div id="placeholder" class="demo-placeholder" style="width:800px; height:500px;"></div> 
 
</div>