gRaphael 折线图颜色变化

发布于 2024-12-03 16:31:30 字数 396 浏览 0 评论 0原文

我目前正在 gRaphael 中实现折线图,它需要 x 轴向上移动 y 轴,使其位于零(我已经通过绘制自己的轴来完成这一点)。

然而,当我尝试对 x 轴上方/下方的区域进行着色时,我遇到了一个问题; gRaphael 的阴影函数仅从图形底部到 Y 高度进行阴影处理(而不是从 y 轴上的 0 到 y 高度)。结果如下:

https://i.sstatic.net/ZuPhw.png

我有在 g.line.js 中发现了几行,它们看起来可疑,好像它们会有所帮助,但我不知道“L”、“C”和“M”值的含义(我认为它们是为了告诉一部分画线等程序?)

有任何帮助吗任何比我更有见识的人将不胜感激!

I'm currently implementing a line chart in gRaphael which requires the x axis to move up the y-axis such that it lies on zero (which I have already accomplished by drawing my own axes).

However, I'm now encountering a problem when attempting to shade the area above/under the x-axis; gRaphael's shade function only shades from the bottom of the graph to Y-height (as opposed to being from 0 on the y-axis to the y-height). The result is the following:

https://i.sstatic.net/ZuPhw.png

I have found a couple of lines in g.line.js which look suspiciously like they would help, but I have no idea what the "L", "C", and "M" values mean (I assume they are to tell a part of the program to draw a line etc?)

Any help from anybody more informed than me would be greatly appreciated!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

还如梦归 2024-12-10 16:31:30

我通过覆盖 g.line.js 文件并创建一个偏移量来添加到 Y 值来解决这个问题。偏移量是通过考虑 Y 轴上的最大值和最小值、SVG 本身的高度以及“装订线”(为 SVG 本身添加填充的值)来计算的(以便可以更好地显示轴上的值)。该公式如下所示(顺便说一句,与轴移至零的方式相同):

(height - 2*gutter)*(miny/(maxy-miny))

I solved this by overriding the g.line.js file and creating an offset to add to the Y values. The offset was calculated by considering the maximum and minimum values on the Y axis, the height of the SVG itself and the "gutter" - a value which adds padding to the SVG itself (so that values on the axes can be displayed better). The formula looks like this (and is, incidentally, identical to how the axes were moved to zero):

(height - 2*gutter)*(miny/(maxy-miny))
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文