将一个滚动条添加到raphael画布

Question

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

如何添加滚动条到拉斐尔画布以容纳拉斐尔画布给定宽度和高度内的整个图表？

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

请帮忙。提前致谢。

Answer 1

我遇到了类似的情况，我发现了一种可行的方法，虽然它有点不方便。我的第一次尝试是在容器div上设置高度和overflow:auto，并将Raphael纸张高度设置为100％。但是，这不起作用;看起来如果将纸张设置为100％，它会抓取div的高度，因为它是，因此插入图表前，所以这没有用。

但是，一个解决方法是执行以下操作，假定容器div具有“holder”的id，我需要可滚动区域为100px高，并且Raphael纸张对象应该是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对象之后，不要对高度设置任何限制，然后将纸张对象和包含div的高度设置为任何所需的高度。

请注意，如果您只是想要显示所有内容，并且不需要使用滚动条将图形放入特定高度，则可以将100％作为高度传递给纸张构造函数，上面的示例的第一行。