如何使用浮动图将滚动条添加到画布中的 X 轴或 Y 轴答案

【问题标题】：How to add a scroll bar to X-axis or Y-axis in canvas using flot graph如何使用浮动图将滚动条添加到画布中的 X 轴或 Y 轴
【发布时间】：2014-02-02 17:35:31
【问题描述】：

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

为了获得一个清晰的图表，所有节点都可见，我想引入一个滚动条，滚动条首先只适合几个系列，然后滚动其余的系列应该是见过。

我该怎么做？

【问题讨论】：

标签： javascript flot

【解决方案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>

【讨论】：

我做了同样的事情，但它不是滚动而是压缩画布内的图形系列
@Vidya，编辑您的问题以显示您正在使用的代码，或者更好地创建一个与“压缩”重复的 jsFiddle。
先生，我将它包装在一个分区中，它工作正常:) 但是我面临的一个问题是，如果图中只有一个系列，它仍然会放置一个滚动条并显示在中间的某个地方的占位符。因此，要查看该特定系列，我需要滚动，但我不希望这种情况发生。先生，我该怎么做？
@Vidya，请创建一个示例 jsFiddle。

【解决方案2】：

把它放在一个div中：

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

CSS：

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

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

【讨论】：

我做了同样的方法，但它没有在画布上添加滚动。而是添加到一个没有用的 div 中。只有当窗口大小溢出时，它才会添加滚动。但我需要在画布上添加滚动。

【解决方案3】：

我认为您可以将一些选项传递给 Flot（带有 Navigation 插件），例如：

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

panRange 的意思是：

"panRange" 将平移限制在一个范围内，例如和 panRange：[-10, 20] 平移在一端停止在 -10，在一端停止在 20 其他。两者都可以为空。

Navigation example

【讨论】：