向 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% 作为高度传递给纸张构造函数，并忘记第一行之后的所有内容上面的示例。