我正在为我的响应式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/
答案 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元素。
只是一些想法......