Question

我有一个非常大的Flot图表，因此当用户向下滚动页面时，他们将无法再看到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和包装器：

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

修复了Flot图表中的位置轴标签

2 个答案: