浮动标签与我的折线图重叠

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();
                }
        });

});

编辑： 唉，难以捉摸Fiddle -- http://jsfiddle.net/edc8jd31/1/

Answer 1

我不太确定我是否理解你的问题，但你只是想移动 x 和 z 轴上的标签而不移动图形本身，对吗？

也许对于 x 轴，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 2

请将以下内容添加到您的CSS：

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

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

输出：

Answer 3

我不确定我是否理解你的问题，但你是否期待这样的事情？
使用简单的 jQuery 来改变每个 X 轴的 css 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>

Answer 4

从您的 fiddle 开始，将 translateY(15px) 添加到 CSS 中的 transform 行，并将 labelHeight: 30 添加到 xaxis 选项.有关完整示例，请参阅 updated fiddle。

解释：
通过在轴标签上使用 transform: rotate(45%)，您可以围绕它们的中心旋转它们，从而使左半部分位于轴上方。附加平移将标签移动到轴下方。 labelHeight 选项是必需的，这样标签的右半部分就不会低于图表的边缘。

浮动标签与我的折线图重叠

Flot labels overlapping with my line graph

jquery

labels

flot

overlapping