Flotラベルと折れ線グラフが重なっています

Question

flotの折れ線グラフ機能を使用していますが、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(); 
       } 
     }); 

}); 

編集：とらえどころのないフィドルああ - 私は、私は右のあなたの問題を理解している場合は本当にわからないんだけど、あなたは、単に移動するhttp://jsfiddle.net/edc8jd31/1/

Answer 1

、あなたのフィドルを形成CSSでtransformラインにtranslateY(15px)を追加し、xaxisにlabelHeight: 30を追加開始オプション。完全な例は、updated fiddleを参照してください。

説明：軸上の左半分をもたらしますが、その中心周りに回転させる軸ラベルのtransform: rotate(45%)を使用することにより
。追加の翻訳は、ラベルを軸の下に移動します。ラベルの右半分がグラフの端より下にならないように、labelHeightオプションが必要です。

Answer 2

グラフ自体を動かすことなく、x軸とz軸のラベルを貼ります。

x軸の場合、CSS3のプロパティtransform: translate(x, y);が役に立ちます。

y軸については理論的には同じことができますが、マージンを下げる方が良いでしょう。

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

出力：ラベルの回転のための

だから、これは多分仕事ができるtransform: rotate(degrees)

を使用します

Answer 4

私はあなたの問題を理解しているとは思っていませんが、このようなことを期待していますか？
単純なjQueryを使用して、各X軸divのCSSを変更します。

の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>