g.raphael js(graphaeljs),line,hoverColumn问题

Question

我正在使用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自动生成.

那么,有什么方法可以解决这个问题吗？请问〜

Answer 1

我终于找到了解决方案(需要1天黑客... = _ =;).问题出在g.line.js,graphael js库中.

在源代码中,有一个像这样的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;
        });

效果很好〜^^; 希望这有助于〜