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 .

How do i do it?

回答1:

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>

Fiddle example 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>

回答2:

Put it in a div:

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

CSS:

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

WIth the overflow attribute, you can control where a scrollbar should be.

回答3:

I think you can pass some options to Flot (with Navigation plugin), such as:

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

where panRange means:

"panRange" confines the panning to stay within a range, e.g. with panRange: [-10, 20] panning stops at -10 in one end and at 20 in the other. Either can be null.

Navigation example

来源：https://stackoverflow.com/questions/21117279/how-to-add-a-scroll-bar-to-x-axis-or-y-axis-in-canvas-using-flot-graph

标签

javascript

flot