我正在使用gRaphael JS lib来绘制折线图。并对haverColumn函数有一些问题。这是我简化的hoverColumn函数。
var line = raphael.g.linechart(50, 20, 650, 120, xAry, yAry, options).hoverColumn(function (){
...
console.log(this.x+","+this.y);
....
}
当鼠标悬停在图表上时,调用hoverColumn函数,并执行日志函数。但是,有些区域不调用hoverColumn函数。
所以,我用firebug做了调试,我找到了原因。折线图上有一些很大的矩形区域,当鼠标在这个区域上时,即使鼠标在图表的列上,hoverColumn也不会被调用。
下面是一张捕捉到的图像,以帮助理解。纵火虫和长老会。
当我使用firebug手动删除rect时,hoverColumn函数运行良好~ -_-;
区号是由gRaphael-js自动生成的。
那么,有没有办法解决这个问题呢?有什么想法请多指教~
发布于 2011-02-25 05:41:29
我终于找到了解决方案(需要1天的hacking...=_=;)。问题出在g.line.js,graphael库中。
在源代码中,有一个类似这样的createColumns函数,
function createColumns(f) {
// unite Xs together
var Xs = [];
for (var i = 0, ii = valuesx.length; i < ii; i++) {
Xs = Xs.concat(valuesx[i]);
}
Xs.sort();
....
...
..
}
问题在于排序功能。Xs.sort()对x值进行排序,但该函数返回的排序数组有错误。所以,如果输入数组是,
valuesx = [0.05076044713698533, 9.579202857778233, 10.93181619059174];
valuesx.sort();
结果是
[0.05076044713698533, 10.93181619059174, 9.579202857778233]
not
[0.05076044713698533, 9.579202857778233, 10.93181619059174]
结果是柱子坏了~
因此,我更改了排序函数Xs.sort(),如下所示:
Xs.sort(function(a, b){
return a - b;
});
效果很好~ ^^;希望这对您有帮助~
https://stackoverflow.com/questions/5103198
复制相似问题