向 raphael canvas 添加滾動條

Question

我能夠生成拉斐爾圖，但它超出了拉斐爾 canvas 的指定寬度和高度。

如何向 Raphael canvas 添加滾動條，以在 Raphael canvas 的給定寬度和高度內容納整個圖表？

有沒有其他方法或解決方法來處理上述情況？

請幫忙。 提前致謝。

Answer 1

我遇到了類似的情況，我找到了一種可行的方法，盡管它有點笨拙。 我的第一次嘗試是在容器 div 上設置高度和overflow:auto ，同時將 Raphael 紙張高度設置為 100%。 但是，這不起作用； the chart is inserted, so that's no good.看來，如果您將紙張設置為 100%，它會在插入圖表抓住 div 的高度，所以這不好。

但是，一種解決方法是執行以下操作，假設容器 div 的 id 為“holder”，我需要可滾動區域為 100px 高，並且 Raphael 論文 object 應為 800px 寬：

var paper = Raphael('holder', 800, '100%');
// add your graphics to the paper object here

var height = $(paper.canvas).outerHeight();
paper.setSize(800, height);
$(paper.canvas).parent().height("100px");

我使用 jQuery 來獲取和設置高度，但是您可以按照自己的意願進行操作。 重要的一點是在創建所有 Raphael 對象之前不要對高度設置任何限制，然后將紙張 object 和包含 div 的高度設置為您想要的任何值。

請注意，如果您只是希望所有內容都顯示出來，並且不需要使用滾動條將圖形調整到特定高度，則可以將 100% 作為高度傳遞給紙張構造函數，並忘記第一行之后的所有內容上面的示例。