在 RaphaelJS 中制作 100% 宽度的图表? [英] Making charts in RaphaelJS that are 100% width?

问题描述

我在 Flash & 中看到过图表基本上可以很好地适应浏览器的大小或它们内部的灵活元素的东西......我不太精通 raphaelJS 但你能做到这一点，如果是这样，怎么做?

解决方案

在 raphaeljs 中，您可以在 Raphael 对象上调用 .setSize 以更新其大小.为了适应浏览器窗口大小的运行时变化，您可以响应窗口大小调整事件.使用 jQuery，你可以这样做:

<前>//初始化拉斐尔对象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();纸.setSize(w,h);重绘元素()；//处理重绘的代码，如有必要});

I have seen graphs in Flash & stuff that basically adapt nicely to whatever the size of the browser or flexible element they are inside of.... I'm not really too well versed with raphaelJS but can you do this, and if so, how?

解决方案

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

这篇关于在 RaphaelJS 中制作 100% 宽度的图表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！