Question

我在Flash＆amp; amp;中看过图表。基本上适应浏览器大小或内部灵活元素的东西......我对raphaelJS并不太熟悉但你能做到这一点，如果是这样，怎么做？

Answer 1

在raphaeljs中，您可以在Raphael对象上调用.setSize来更新其大小。要适应浏览器窗口大小的运行时更改，您可以响应窗口大小调整事件。使用jQuery，你可以这样做：

// initialize Raphael object
var w = $(window).width(), 
    h = $(window).height();

var paper = Raphael($("#my_element").get(0), w,h);

$(window).resize(function(){
     w = $(window).width();
     h = $(window).height();
     paper.setSize(w,h);
     redraw_element(); // code to handle re-drawing, if necessary
});

Answer 2

这将为您提供响应式SVG

var w = 500, h=500;
var paper = Raphael(w,h);
paper.setViewBox(0,0,w,h,true);
paper.setSize('100%', '100%');

Answer 3

通常可以将宽度设置为％100并在SVG中定义viewBox。但是，Raphael JS直接在你的SVG元素上手动设置宽度和高度，从而杀死了这种技术。

波什的回答很棒，但这对我来说是扭曲了宽高比。不得不调整一些东西，让它正常工作。此外，还包括一些维持最大尺寸的逻辑。

// Variables
var width;
var height;
var maxWidth = 940;
var maxHeight = 600;
var widthPer;

function setSize() {
    // Setup width
    width = window.innerWidth;
    if (width > maxWidth) width = maxWidth;

    // Setup height
    widthPer = width / maxWidth;
    height = widthPer * maxHeight;
}
var paper = Raphael(document.getElementById("infographic"), 940, 600);
paper.setViewBox(0, 0, 940, 600, true);

window.onresize = function(event) {
    setSize();
    paper.setSize(width,height);
    redraw_element();
}

在RaphaelJS制作100％宽度的图表？

3 个答案: