响应SVG线形图与Raphaë 1

Responsive SVG line graph with Raphaël

本文关键字：#235 Rapha SVG 响应更新时间：2023-09-26

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

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

有没有办法将两者结合起来，使Raphaël图形响应?

下面是codependency演示作者的一篇文章，介绍他如何制作响应式SVG: http://meloncholy.com/blog/making-responsive-svg-graphs/

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

类似于codependency。在你发布的例子中，你可以根据window.resize事件的窗口宽度重新绘制/重新绘制整个东西。

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