与Raphaël一致的响应式SVG线图

时间:2013-05-31 02:00:50

标签: javascript jquery graph svg raphael

我正在为我的响应式webapp寻找图形解决方案。我非常喜欢这个Raphaël分析演示:http://raphaeljs.com/analytics.html(这里是JS Bin:http://jsbin.com/svg/1/edit

......但它没有响应。我在codepen上找到了这个响应式SVG图:http://codepen.io/meloncholy/pen/KxiJA,但我正在寻找像Raphaël这样的JavaScript集成解决方案,而不仅仅是静态SVG。

是否可以将两者结合起来以使Raphaël图响应?

以下是codepen demo的作者关于他如何制作响应式SVG的文章:http://meloncholy.com/blog/making-responsive-svg-graphs/

1 个答案:

答案 0 :(得分:0)

您发布的Raphaël演示会在window.onload事件被触发时呈现图表。演示使用var r = Raphael("holder", width, height)生成一个固定宽度为800px的舞台,并在此处r.drawGrid(...)绘制图表。

与您发布的codepen.io示例类似,您可以使用不同的宽度重新启动/重绘整个事物,具体取决于window.resize事件上窗口的宽度。

第二种方法是,使用与codepen.io示例类似的window.resize函数遍历var unscale = function (el) { ... }事件上的所有SVG元素。

只是一些想法......