Raphaël的响应式SVG线图 [英] Responsive SVG line graph with Raphaël

问题描述

我正在为我的响应式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/

解决方案您发布的RaphaëlDemo会在触发 window.onload 事件时呈现图形。该演示程序使用 var r = Raphael（holder，width，height）生成固定宽度为 800px 并在此处绘制图表 r.drawGrid（...）。

类似于codepen.io例如你已经发布了，你可以根据 window.resize 事件的窗口宽度，用不同的宽度重新整理/重绘整个事物。 第二种方法是，循环遍历 window.resize 事件上的所有SVG元素，并使用类似的 var unscale = function（el）{...} 函数就像codepen.io中的例子一样

。

I'm looking at graphing solutions for my responsive webapp. I really like this Raphaël analytics demo: http://raphaeljs.com/analytics.html (Here it is on JS Bin: http://jsbin.com/svg/1/edit)

...but it's not responsive. I found this responsive SVG graph on codepen: http://codepen.io/meloncholy/pen/KxiJA, but I'm looking for a JavaScript integrated solution like Raphaël, not just a static SVG.

Any way to combine the two so as to make the Raphaël graph responsive?

Here's an article by the codepen demo's author on how he made the responsive SVG: http://meloncholy.com/blog/making-responsive-svg-graphs/

解决方案

The Raphaël Demo you posted renders the graph when the window.onload event is fired. The Demo generates with var r = Raphael("holder", width, height) a stage with a fixed width of 800px and draws the graph somewhere here r.drawGrid(...).

Similar to the codepen.io example you've posted, you could reinit/redraw the whole thing with a different width depending on the width of the window on the window.resize event.

A second approach, you loop through all SVG elements on the window.resize event with a similar var unscale = function (el) { ... } function like in codepen.io example.

Just some ideas...

这篇关于Raphaël的响应式SVG线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！