jQuery Flot：縮放時更改x軸

有沒有一種方法可以讓x軸從顯示小時切換到例如星期幾，幾個月..當縮小？jQuery Flot：縮放時更改x軸

目前我的x軸被配置成這樣：

xaxis: { 
    mode: "time", 
    minTickSize: [1, "second"], 
    timeformat: "%H:%M:%S", 
}

我的默認圖形看起來不錯，但是當我縮小足夠的時間，對x軸的標籤只顯示「00:00」。我如何更改timeformat以便日期也包含在內？例如。 Tue 27 00:00或類似的。

下面是當圖被縮小了很多的例子（顯然我需要遠程一些數據點，使它看起來更順暢..）

Example

來源

2013-02-27 DavidS

您可以使用標準的符添加日期，如％Y-％m-％d。完整列表可以在Time Series Data部分的API文檔中找到。

要根據範圍得到更新的格式，即當放大時顯示HMS但縮小時顯示YMD更加棘手。您需要聽取'plotzoom'事件並檢查範圍以查看格式是否需要更改。如果是這樣，請使用getOptions（）檢索並更新圖的選項，然後調用setupGrid &繪圖以使用新格式重繪圖。

來源

2013-02-27 14:12:58 DNS

於是我只檢查說'rangeStart'和'rangeEnd'之間的區別？關於刪除數據點的部分：我們可以輕鬆做到這一點嗎？我希望重點在那裏，而不僅僅是一個圓圈/點，因爲就你看到的圖像而言，它看起來不太好。非常感謝您的回覆！ – DavidS 2013-02-27 15:54:54

我做了你所說的;如果'xaxis.min'和'max'之間的差異大於'3600000'，我稱'getOptions'並將'xaxis.timeformat'修改爲'％Y-％m-％d'。然後我調用了'setupGrid（）'和'draw（）'，但沒有更改標籤。 – DavidS 2013-02-28 12:55:21

我解決了這個通過製造定製tickFormatter爲X軸：

在你的x軸選項的說：

xaxis: { 
    mode: "time", 
    tickFormatter: customXAxisFormatter, 
    ... 
}

然後你customXAxisFormatter可能是如。：

function customXAxisFormatter(val, axis) 
{ 
    var d = new Date(val); 

    // If time difference is more than 24 hours 
    if ((axis.max - axis.min) > (24*3600*1000)) 
     return d.strftime("%a<br>%H:%M"); 
    else 
     return d.strftime("%H:%M"); 
}

我希望這有助於:)

來源

2014-11-13 13:47:50 jhappone

jQuery Flot：縮放時更改x軸

回答

相關問題