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 関数が呼び出され、ログ関数が実行されます。ただし、一部の地域では hoverColumn 関数を呼び出していません。

で、firebugを使ってデバッグしたところ、原因がわかりました。折れ線グラフに大きな四角形の領域がありました。マウスがその領域にある場合、マウスがグラフの列にあるにもかかわらず hoverColumn が呼び出されません。

理解を助けるためにキャプチャされた画像を次に示します。火のバグ、および直角。

ここに画像の説明を入力

firebug を使用して rect を手動で削除すると、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 に答える