Tạo biểu đồ trong RaphaelJS có chiều rộng 100% không?

Question

Tôi đã thấy đồ thị trong các công cụ Flash & về cơ bản thích ứng với bất kỳ kích thước nào của trình duyệt hoặc yếu tố linh hoạt bên trong .... Tôi không thực sự thành thạo với raphaelJS nhưng bạn có thể làm điều này, và nếu rồi sao?

Answer 1

Trong raphaeljs, bạn có thể gọi .setSize trên đối tượng Raphael để cập nhật kích thước của nó. Để thích ứng với thay đổi thời gian chạy trong kích thước cửa sổ trình duyệt, bạn có thể trả lời sự kiện thay đổi kích thước cửa sổ. Sử dụng jQuery, bạn có thể làm:

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

Thông thường bạn có thể đặt chiều rộng thành% 100 và xác định khung nhìn trong SVG. Tuy nhiên, Raphael JS tự đặt chiều rộng và chiều cao trực tiếp trên các phần tử SVG của bạn, điều này sẽ giết chết kỹ thuật này.

Câu trả lời của Bosh rất tuyệt, nhưng nó đã bóp méo tỷ lệ khung hình của tôi. Đã phải tinh chỉnh một vài điều để làm cho nó hoạt động chính xác. Ngoài ra, bao gồm một số logic để duy trì kích thước tối đa.

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

Điều này sẽ giúp bạn có được một SVG đáp ứng

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