浮動圖表中的固定位置軸標籤

Question

我有一個高度非常大的浮動圖表，所以當用戶在頁面中間向下滾動時，他們不能再看到x軸刻度標籤。

有沒有辦法讓軸標籤position:fixed，以便當用戶滾動時，軸標籤保持可見？ 或者至少，有沒有辦法將x軸刻度標籤包裝在div中，以便我可以通過這個div包裝來控制位置？

Answer 1

標籤已經分組在div元素中。您可以使用

div.flot-x-axis { 
    position: fixed !important; 
} 

但這也會導致您必須糾正的標籤位置發生變化。

看到這個例子fiddle。

Answer 2

我發現了一個很好的解決方案，所以我會發佈一個答案給我自己的問題。

基本上，我最終做的是將我的佔位符div封裝在另一個div中，降低了高度。然後我將wrap div設置爲使用滾動條，這樣我就可以滾動圖表。 然後，我將一些CSS動態添加到刻度標籤以使它們定位：固定並將它們移動到正確的位置。與包裝一起

我的佔位符格：

<div style="position:absolute;left:275px;top:200px;width:1250px;height:600px;overflow-y:scroll;"> 
<div id="placeholder" style="width:1150px;height:3410px;"></div> 
</div> 

我的動態CSS增加：

$(".flot-text .flot-x1-axis").css("position","fixed"); 
$(".flot-text .flot-x1-axis").css("top","80px"); 
$(".flot-text .flot-x1-axis").css("left","300px"); 
$(".flot-text .flot-x1-axis .flot-tick-label").css("background-color","white"); 
$(".flot-text .flot-x1-axis .flot-tick-label").css("width","70px");