Creazione di grafici in RaphaelJS con larghezza del 100%?

Question

Ho visto grafici in Flash & elementi che sostanzialmente si adattano bene a qualsiasi dimensione del browser o elemento flessibile in cui si trovano all'interno .... Non sono molto esperto di raphaelJS ma puoi farlo e, se così come?

Answer 1

In raphaeljs, è possibile chiamare .setSize su un oggetto Raphael per aggiornarne le dimensioni. Per adattarsi alle modifiche di runtime nelle dimensioni della finestra del browser, è possibile rispondere a un evento di ridimensionamento della finestra. Utilizzando jQuery, si potrebbe fare:

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

Normalmente è possibile impostare la larghezza a 100% e definire un viewBox all'interno di SVG. Ma, Raphael JS imposta manualmente larghezza e altezza direttamente sugli elementi SVG, il che uccide questa tecnica.

La risposta di Bosh è ottima, ma per me ha distorto le proporzioni. Ho dovuto modificare alcune cose per farlo funzionare correttamente. Inoltre, includeva alcune logiche per mantenere una dimensione massima.

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

questo modo si ottiene un sensibile SVG

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