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

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

Ответ 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
});

Ответ 2

Это даст вам отзывчивый SVG

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

Ответ 3

Обычно вы можете установить ширину в% 100 и определить viewBox внутри SVG. Но, Raphael JS вручную устанавливает ширину и высоту непосредственно на ваши элементы SVG, что убивает эту технику.

Ответ на Bosh велик, но это искажает соотношение сторон для меня. Придется настроить несколько вещей, чтобы заставить его работать правильно. Кроме того, включена некоторая логика для поддержания максимального размера.

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