开发者

gRaphael line chart shade changes

开发者 https://www.devze.com 2023-04-03 02:10 出处:网络
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).

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:

http://i.stack.imgur.com/ZuPhw.png

I have found a couple of lines i开发者_Go百科n 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!


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))
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号