如何使我的flot圖形的左邊框與最左邊的垂直線對齊？

我用Flot創建了一個圖（使用jQuery 1.11）。我遇到了一個問題，試圖讓網格的邊框與網格的線條對齊。正如您在此Fiddle中看到的那樣，圖形的左邊緣/邊界不與圖形的最左側垂直線重疊。我如何讓他們對齊？我創造了我海軍報圖如下所示：如何使我的flot圖形的左邊框與最左邊的垂直線對齊？

$(function() { 
    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", 
     labelHeight: 30 
    }, 
    points: { 
     show: true 
    }, 
    lines: { 
     show: true 
    }, 
    grid: { 
     margin: 10, 
     labelMargin: 5, 
     labelWidth: 20, 
     hoverable: true, 
     clickable: true, 
     tickColor: "#efefef", 
     borderWidth: 2, 
     borderColor: "#efefef" 
    }, 
    tooltip: true 
    });

來源

2016-08-20 Dave

由於數據點分佈在數年，海軍報的自動剔代給你一個每三個月打勾（第一個是一個月）。 x軸上的第一個勾號是2014年7月1日，第一個數據點是2014年6月28日。

1）要在圖表的邊緣再次打勾，您可以定義x軸的最小值於2014年4月1日（和2016年7月1日的最大值）在x軸選項，確切值取決於你的時區（這裏UTC + 2），您可能需要改變它們（updated fiddle）：

xaxis: { 
    mode: "time", 
    labelHeight: 30, 
    min: 1396275200000, 
    max: 1467396000000 
},

2）另一種解決方案可能是自己定義滴答（等於您的數據點x值）。然後你只蜱其中一個數據點（updated fiddle）：

xaxis: { 
    mode: "time", 
    labelHeight: 30, 
    ticks: [1403913600000, 1437782400000, 1466812800000], 
    timeformat: '%Y/%m/%d' 
},

來源

2016-08-22 09:15:54 Raidri

嗨，我喜歡你的第一個想法，關於使用「最小」和很好地隔開的網格線，但我想第一點是圖中最左邊的點。 DIsappointingly，當我嘗試這個，我的圖表左側的小差距仍然 - http://jsfiddle.net/y16h8LmL/14/。 – Dave

如何使我的flot圖形的左邊框與最左邊的垂直線對齊？

回答

相關問題