浮动图表中的固定位置轴标签

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");