当前位置：文江博客话题详情

在 RaphaelJS 中制作 100% 宽度的图表？

发布于 2024-09-27 20:17:01 字数 97 浏览 8 评论 0原文

我在Flash & 中看到过图表。基本上可以很好地适应浏览器大小或它们所在的灵活元素的东西......我不太熟悉 raphaelJS 但你能做到这一点吗？如果可以，怎么做？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

以可爱出名 2024-10-04 20:17:01

在 raphaeljs 中，您可以对 Raphael 对象调用 .setSize 来更新其大小。为了适应浏览器窗口大小的运行时变化，您可以响应窗口调整大小事件。使用 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
});

In raphaeljs, you can call .setSize on a Raphael object to update its size. To adapt to runtime changes in browser window size, you can respond to a window resize event. Using jQuery, you could do:

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

回复收藏 0 原文

半步萧音过轻尘 2024-10-04 20:17:01

这将为您提供响应式 SVG

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

This will get you a responsive SVG

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

回复收藏 0 原文

溇涏 2024-10-04 20:17:01

通常你可以将宽度设置为 %100 并在 SVG 中定义一个 viewBox。但是，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();
}

Normally you could set the width to %100 and define a viewBox within SVG. But, Raphael JS manually set a width and height directly on your SVG elements, which kills this technique.

Bosh's answer is great, but it was distorting the aspect ratio for me. Had to tweak a few things to get it working correctly. Also, included some logic to maintain a maximum size.

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

回复收藏 0 原文

~没有更多了~