如果您不想使用平移和缩放插件(如@MF82所建议的),而是想要一个真正的滚动条,只需将容器目标div包装在另一个div中:
<div
style="width:315px;height:300px;overflow-y:scroll">
<div class="chart" id="placeholder1" style="width:300px;height:1000px;">
</div>
</div>
这里有一个 Fiddle 示例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>
我认为你可以通过Flot(使用导航插件)传递一些选项,例如:
pan: {
interactive: true
},
xaxis: {
panRange: [Your xmin, your xmax]
}
其中panRange的意思是:
"panRange"将平移限制在一个范围内,例如使用panRange:[-10, 20],平移会在一端停止于-10,在另一端停止于20。任何一端都可以为null。
<div class="graph">
<!-- here the graph -->
</div>
CSS:
.graph
{
width: 200px;
overflow-y:scroll;
overflow-x:hidden;
}
使用overflow属性,您可以控制滚动条的位置。