如何使用浮点图在画布上添加滚动条到X轴或Y轴

我有一个多系列的flot图，绘制在宽和高的画布上。当絮图有多个系列时，它会尝试在画布的高度和宽度内进行压缩，并且不会清楚地看到絮图。如何使用浮点图在画布上添加滚动条到X轴或Y轴

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

我该怎么做？

2014-01-14 user123

把它放在一个div：

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

CSS：

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

与溢出的属性，你可以控制滚动条应该是。

来源

2014-01-14 15:33:18 schnawel007

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

我想你可以通过一些选项来海军报（带导航插件），如：

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

其中panRange表示：

“panRange”地限制平移留的范围内，例如与 panRange：[-10，20]平移停止在-10的一端和在其他。可以是null。

Navigation example

来源

2014-01-14 15:38:38

如果你不想使用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。

来源

2014-01-14 15:47:51 Mark

我做了同样的方式，但它不滚动，而是在画布内压缩一系列图形 – user123

@Vidya，编辑您的问题以显示您正在使用的代码，或者更好地创建一个与“压缩”重复的jsFiddle。 – Mark

先生，我把它包裹在一个部门其工作正常:)但我面临的问题是，如果图中只有一个系列，它仍然放置一个滚动条，并在占位符的中间显示它。所以看到我需要滚动的特定系列，但我不希望发生这种情况。我怎么能做到先生？ – user123

如何使用浮点图在画布上添加滚动条到X轴或Y轴

回答

相关问题