向拉斐尔画布添加滚动条答案

【问题标题】：Adding a scroll-bar to the raphael canvas向拉斐尔画布添加滚动条
【发布时间】：2011-06-06 10:01:35
【问题描述】：

我能够生成拉斐尔图，但它超出了拉斐尔画布的指定宽度和高度。

如何向 Raphael 画布添加滚动条，以在 Raphael 画布的给定宽度和高度内容纳整个图表？

是否有其他方法或解决方法来处理上述情况？

请帮忙。提前致谢。

【问题讨论】：

【解决方案1】：

我遇到了类似的情况，我找到了一种可行的方法，尽管它有点笨拙。我的第一次尝试是在容器 div 上设置高度和overflow:auto，同时将 Raphael 纸张高度设置为 100%。但是，这不起作用；看来，如果您将纸张设置为 100%，它会抓取 div 的高度，因为它是 在插入图表之前，所以这不好。

但是，一种解决方法是执行以下操作，假设容器 div 的 id 为“holder”，我需要可滚动区域为 100 像素高，并且拉斐尔纸对象应为 800 像素宽：

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 对象之前不要对高度设置任何限制，然后将纸对象的高度和包含的 div 设置为您想要的任何值。

请注意，如果您只想显示所有内容，并且不需要使用滚动条将图形调整到特定高度，您可以将 100% 作为高度传递给纸张构造函数，然后忘记之后的所有内容上面示例的第一行。

【讨论】：