如何使用flot图将滚动条添加到画布中的X轴或Y轴
如何使用flot图将滚动条添加到画布中的X轴或Y轴
提问于 2014-01-14 23:27:36
我有一个多系列flot图，它被绘制在宽度和高度的画布上。当flot图有多个序列时，它试图在画布的高度和宽度内压缩，flot图将看不清楚。
为了获得一个清晰的图形，所有系列的所有节点都是可见的，我想引入一个滚动条，这样滚动条一开始只适合几个系列，然后通过滚动，应该可以看到系列的其余部分。
我该怎么做呢？
回答 3
Stack Overflow用户
发布于 2014-01-14 23:47:52
如果你不想使用panning and zooming插件(正如@MF82所建议的那样)，并且想要一个真正的滚动条，只需将容器目标div包装在另一个div中：
<div
style="width:315px;height:300px;overflow-y:scroll">
<div class="chart" id="placeholder1" style="width:300px;height:1000px;">
</div>
</div>小提琴示例here。
$(function () {
var plot1 = $.plot($("#placeholder1"),[
{ data: [[0,0],[1,1],[2,2]], label: "Series A"}
], {
series: {
lines: { show: true },
points: { show: true }
},
grid: { hoverable: true, clickable: true },
xaxis: {
ticks: [[0,"One"],[1,"Two"],[2,"Three"]]
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<div
style="width:315px;height:300px;overflow-y:scroll">
<div class="chart" id="placeholder1" style="width:300px;height:1000px;">
</div>
</div>
Stack Overflow用户
发布于 2014-01-14 23:33:18
将其放在div中：
<div class="graph">
<!-- here the graph -->
</div>CSS：
.graph
{
width: 200px;
overflow-y:scroll;
overflow-x:hidden;
}在WIth属性中，你可以控制滚动条的位置。
Stack Overflow用户
发布于 2014-01-14 23:38:39
我认为您可以将一些选项传递给Flot (使用导航插件)，例如：
pan: {
interactive: true
},
xaxis: {
panRange: [Your xmin, your xmax]
} 其中，panRange表示：
"panRange“将平移限制在一个范围内，例如panRange：-10，20平移在一端的-10处停止，另一端的平移在20处停止。其中任何一个都可以为空。
Navigation example
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21117279
复制相关文章
相似问题
腾讯云开发者
