jquery - 浮点标签与我的折线图重叠

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

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

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

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

输出: