开发者

raphaël rotate() error in Firefox

开发者 https://www.devze.com 2023-04-03 06:32 出处:网络
I\'ve drawn a linechart with g.raphael. I\'ve made a custom x-axis with my own values. And now I want these val开发者_运维知识库ues to be rotated 90 degrees, so they\'re vertical instead of horizontal

I've drawn a linechart with g.raphael. I've made a custom x-axis with my own values. And now I want these val开发者_运维知识库ues to be rotated 90 degrees, so they're vertical instead of horizontal.

To do that, I'm using raphaels rotate() function. And this works perfectly in both IE (8) and Opera. But in Firefox nothing happens, and Firebug prints this error

Unexpected value rotate(90 NaN Infinity) parsing transform attribute.

I can't find anything about this error elsewhere, and I can't see how it isn't correct. And even more so, I find it extremely weird that it works in the other browsers.

Anybody have a clue about this?

My code - where xcoor is a simple int list of values 0-30:

for (var i in xcoor) {
     var dato = new Date();
     dato.setDate(new Date().getDate() - i);

     var xTxt = r.text(30 + (i * (725 / 30)), 315, dato.getDate() + '/' + (dato.getMonth() + 1)).rotate(90);
}


Well, after hours of googling, reading and more googling, I finally found a solution.

I still don't get why the first one doesn't work. But none the less I figured out a way that works in all the browsers:

for (var i in xcoor) {
     var dato = new Date();
     dato.setDate(new Date().getDate() - i);
     var xTxt = blokCanvas.text(40 + (i * (725 / 30)), 315, dato.getDate() + '/' + (dato.getMonth() + 1))
     xTxt.rotate(90, (40 + (i * (725 / 30))), 315);
}

The rotate-function comes in more different version. One of them is this

rotate(degrees, x, y)

Where degrees represents the number of degrees the item should rotate and x, y represents the coordinates of the point around which the item should be rotated.

Setting the x,y values to the same as the ones placing the item in the first place gives me the wanted result.

Yay!

0

精彩评论

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

关注公众号