Faire des graphiques dans RaphaelJS qui sont 100% de largeur?

Question

J'ai vu des graphiques dans Flash & choses qui s'adaptent fondamentalement bien à la taille du navigateur ou de l'élément flexible qu'ils sont à l'intérieur de .... Je ne connais pas vraiment le raphaelJS mais pouvez-vous le faire, et si alors, comment?

Answer 1

Dans raphaeljs, vous pouvez appeler .setSize sur un objet Raphael pour mettre à jour sa taille. Pour s'adapter aux changements d'exécution dans la taille de la fenêtre du navigateur, vous pouvez répondre à un événement de redimensionnement de la fenêtre. En utilisant jQuery, vous pouvez faire:

 
// 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

Normalement, vous pouvez définir la largeur à 100% et définir un viewBox dans les SVG. Mais, Raphael JS définit manuellement une largeur et une hauteur directement sur vos éléments SVG, ce qui tue cette technique.

La réponse de Bosh est géniale, mais elle déformait le rapport d'aspect pour moi. J'ai dû ajuster quelques choses pour le faire fonctionner correctement. En outre, inclus une certaine logique pour maintenir une taille maximale.

// 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(); 
} 

Answer 3

Cela vous obtenir un SVG réactif

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