如何使用浮點圖在畫布上添加滾動條到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軸

回答

相關問題