如何使用flot graph将滚动条添加到画布中的X轴或Y轴

Question

我有一个多系列的flot图，它绘制在宽度和高度的画布上。当flot图形具有多个系列时，它会尝试在画布的高度和宽度内进行压缩，并且不能清楚地看到flot图形。

为了获得一个清晰的图形，所有节点都可以看到所有节点，我想引入一个滚动条，使滚动条首先只适合几个系列，然后通过滚动显示系列的其余部分。

我该怎么做？

Answer 1

如果你不想使用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>

Answer 2

把它放在div中：

<div class="graph">
   <!-- here the graph -->
</div>

CSS：

 .graph
 {
 width: 200px;
 overflow-y:scroll; 
 overflow-x:hidden;
 }

使用overflow属性，您可以控制滚动条的位置。

Answer 3

我想你可以将一些选项传递给Flot（带导航插件），例如：

pan: {
    interactive: true
},
xaxis: {
    panRange: [Your xmin, your xmax]
} 

panRange的意思是：

“panRange”将平移限制在一定范围内，例如使用panRange：[ - 10,20]平移在一端停在-10，在另一端停在20。两者都可以为null。

Navigation example