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

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

从你的小提琴开始，添加translateY(15px)到transformCSS 中的行并添加labelHeight: 30到xaxis选项。有关完整示例，请参阅更新的小提琴。

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