2

我正在使用 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 函数，并执行 log 函数。但是，有些区域不调用 hoverColumn 函数。

所以，我用firebug做了调试，我找到了原因。折线图上有一些大的矩形区域，当鼠标在该区域时，尽管鼠标在图表的列上，但不会调用 hoverColumn。

这是一张捕获的图像，以帮助理解。火虫和矩形。

在此处输入图像描述

当我使用萤火虫手动删除矩形时，hoverColumn 功能运行良好~ -_-;

区号由 gRaphael-js 自动生成。

那么，有什么办法可以解决这个问题吗？请有什么想法~

4

1 回答 1

8

我终于找到了解决方案（需要 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;
        });

效果不错~^^; 希望这会有所帮助~

于 2011-02-25T05:41:28.863 回答