如何在canvas中使用flot图表为X轴或Y轴添加滚动条

Question

我有一个多系列 flot 图表，它绘制在宽度和高度的画布上。当 flot 图表具有多个系列时，它会尝试在画布的高度和宽度内压缩，并且 flot 图表不会清晰地显示。

为了获得具有所有系列可见节点的清晰图形，我想以这样一种方式引入滚动条，即滚动条首先只适合几个系列，然后通过滚动可以看到其余系列。

我该怎么做？

- user123

Answer 1

如果您不想使用平移和缩放插件（如@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>

- Mark

---

我用了同样的方法，但它没有滚动，而是将图形系列压缩在画布内。 - user123

@Vidya，请编辑您的问题以显示您正在使用的代码，或者最好创建一个jsFiddle来复制“压缩”。 - Mark

先生，我将它包装在一个 division 中，它运行得很好 :) 但是我面临的一个问题是，如果图表中只有一个系列，它仍然会放置一个滚动条，并在占位符的中间某处显示它。因此，为了查看特定的系列，我需要滚动，但我不希望发生这种情况。先生，我该怎么做？ - user123

@Vidya，请创建一个 jsFiddle 示例。 - Mark

Answer 2

我认为你可以通过Flot（使用导航插件）传递一些选项，例如：

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

其中panRange的意思是：

"panRange"将平移限制在一个范围内，例如使用panRange：[-10, 20]，平移会在一端停止于-10，在另一端停止于20。任何一端都可以为null。

导航示例

- Sidney Gijzen

Answer 3

把它放在一个div中：

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

CSS：

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

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

- schnawel007

---

我用了同样的方法，但是它没有在画布上添加滚动条。相反，它添加到一个无用的 div 上。只有当窗口大小超出时才会添加滚动条。但我需要在画布上添加滚动条。 - user123