Создание диаграмм в RaphaelJS, которые являются 100% шириной?

Question

Я видел графики во Flash & материалах, которые в основном хорошо адаптируются независимо от размера браузера или гибкого элемента, в котором они находятся. Я не слишком хорошо разбираюсь в raphaelJS, но вы можете это сделать, и если вы так как?

Answer 1

В raphaeljs вы можете вызвать .setSize для объекта Raphael, чтобы обновить его размер. Чтобы адаптироваться к изменениям времени выполнения в размере окна браузера, вы можете ответить на событие изменения размера окна. С помощью 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

Обычно вы можете установить ширину на 100% и определить Viewbox внутри SVG. Но, 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(); 
} 

Answer 3

Это поможет вам реагировать SVG

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