Создание диаграмм в 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

Это даст вам отзывчивый 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 и определить 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();
}