javascript - Raphaël 的响应式 SVG 折线图

Question

我正在为我的响应式网络应用寻找图形解决方案。我真的很喜欢这个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 演示的作者关于他如何制作响应式 SVG 的文章:http://meloncholy.com/blog/making-responsive-svg-graphs/

Answer 1

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

与您发布的 codepen.io 示例类似，您可以根据 window.resize 事件中窗口的宽度，以不同的宽度重新初始化/重绘整个内容。

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

只是一些想法...