jquery – 绘制与我的折线图重叠的标签

我正在使用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/

解决方法

从你的小提琴开始,将translateY(15px)添加到CSS中的变换行,并将labelHeight：30添加到xaxisoptions.有关完整示例,请参阅 updated fiddle.

说明：通过在轴标签上使用变换：旋转(45％),可以围绕它们的中心旋转它们,使左半部分位于轴上方.附加平移将标签移动到轴下方. labelHeight选项是必需的,因此标签的右半部分不会低于图表的边缘.