如何使用浮动图将滚动条添加到画布中的X轴或Y轴 [英] How to add a scroll bar to X-axis or Y-axis in canvas using flot graph

问题描述

我有一个多系列的浮点图，它绘制在宽度和高度的画布中.当浮动图具有多个系列时，它将尝试在画布的高度和宽度内进行压缩，并且无法清晰地看到浮动图.

I have a multi-series flot graph which is plotted in a canvas of width and height. When the flot graph has multi series it tries to compress within the height and width of the canvas and the flot graph wont't be seen clearly.

为了获得一个清晰的图形，所有节点上所有系列都可见，我想引入一个滚动条，使得滚动条首先只适合少数几个系列，然后通过滚动其余系列来实现.见过.

In order to obtain a clear graph with all the series visible with all the nodes I want to introduce a scroll bar in such a way that the scroll bar fits only few series at first then by scrolling the rest of the series should be seen .

我该怎么做?

推荐答案

如果您不想使用平移和缩放插件(如@ MF82所示)，并且想要一个真正的滚动条，只需将容器目标div包装在另一个div中即可:

If you don't want to use the panning and zooming plugin (as @MF82 suggests) and want a true scroll bar, just wrap the container target div in another div:

<div 
  style="width:315px;height:300px;overflow-y:scroll">
    <div class="chart" id="placeholder1" style="width:300px;height:1000px;">
     </div>
</div>

小提琴示例此处.

$(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>

这篇关于如何使用浮动图将滚动条添加到画布中的X轴或Y轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！