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