blocks|key|1321957|text|将其放在div中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1321958|<div+class="graph">
+++
</div>|code-block|syntax|javascript|1321959|CSS：|1321960|+.graph
+{
+width:+200px;
+overflow-y:scroll;+
+overflow-x:hidden;
+}|1321961|在WIth属性中，你可以控制滚动条的位置。|1321962|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Put it in a div:</p>

<pre><code>&lt;div class="graph"&gt;
   &lt;!-- here the graph --&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code> .graph
 {
 width: 200px;
 overflow-y:scroll; 
 overflow-x:hidden;
 }
</code></pre>

<p>WIth the overflow attribute, you can control where a scrollbar should be. </p>


blocks|key|1209130|text|我认为您可以将一些选项传递给Flot+(使用导航插件)，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1209131|pan:+{
++++interactive:+true
},
xaxis:+{
++++panRange:+[Your+xmin,+your+xmax]
}+|code-block|syntax|javascript|1209132|其中，panRange表示：|1209133|1209134|+"panRange“将平移限制在一个范围内，例如panRange：-10，20平移在一端的-10处停止，另一端的平移在20处停止。其中任何一个都可以为空。|blockquote|1209135|1209136|1209137|Navigation+example|offset|length|1209138|entityMap|0|LINK|mutability|MUTABLE|url|http://www.flotcharts.org/flot/examples/navigate/index.html^0|0|0|0|0|0|0|0|0|I|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|15|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@$Q|18|R|19|1|1A]]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

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

<pre><code>pan: {
    interactive: true
},
xaxis: {
    panRange: [Your xmin, your xmax]
} 
</code></pre>

<p>where panRange means:</p>

<blockquote>
  <p>"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.</p>
</blockquote>

<p><a href="http://www.flotcharts.org/flot/examples/navigate/index.html" rel="nofollow">Navigation example</a></p>


blocks|key|1209167|text|如果你不想使用panning+and+zooming插件(正如@MF82所建议的那样)，并且想要一个真正的滚动条，只需将容器目标div包装在另一个div中：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1209168|<div+
++style="width:315px;height:300px;overflow-y:scroll">
++++<div+class="chart"+id="placeholder1"+style="width:300px;height:1000px;">
+++++</div>
</div>|code-block|syntax|javascript|1209169|小提琴示例here。|1209170|​|1209171|$(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"]]
++++++++}
++++});
});|1209172|<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>|1209173|1209174|entityMap|0|LINK|mutability|MUTABLE|url|http://www.flotcharts.org/flot/examples/navigate/index.html|1|http://jsfiddle.net/94SDd/^0|7|J|0|0|0|5|4|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|C|$]]|$1|M|3|N|5|F|7|1B|8|@]|9|@]|C|$G|H]]|$1|O|3|P|5|F|7|1C|8|@]|9|@]|C|$G|H]]|$1|Q|3|L|5|6|7|1D|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]|Z|$5|U|V|W|C|$X|10]]]]

<p>If you don't want to use the <a href="http://www.flotcharts.org/flot/examples/navigate/index.html" rel="nofollow noreferrer">panning and zooming</a> plugin (as @MF82 suggests) and want a true scroll bar, just wrap the container target div in another div:</p>

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

<p>Fiddle example <a href="http://jsfiddle.net/94SDd/" rel="nofollow noreferrer">here</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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"]]
        }
    });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"&gt;&lt;/script&gt;
&lt;div 
  style="width:315px;height:300px;overflow-y:scroll"&gt;
    &lt;div class="chart" id="placeholder1" style="width:300px;height:1000px;"&gt;
     &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p><img src="https://i.stack.imgur.com/O8fiZ.jpg" alt="http://i.stack.imgur.com/O8fiZ.jpg"><br>
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. </p>

<p>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 . </p>

<p>How do i do it? </p>

<p><a href="https://i.stack.imgur.com/eSsj4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eSsj4.png" alt="enter image description here"></a></p>


How to add a scroll bar to X-axis or Y-axis in canvas using flot graph

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

​我有一个多系列flot图，它被绘制在宽度和高度的画布上。当flot图有多个序列时，它试图在画布的高度和宽度内压缩，flot图将看不清楚。为了获得一个清晰的图形，所有系列的所有节点都是可见的，我想引入一个滚动条，这样滚动条一开始只适合几个系列，然后通过滚动，应该可以看到系列的其余部分。我该怎么做呢？​​

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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