gRaphael圖書館 - 線型圖與多條線路，各個提示

Question

我這裏有一個線型圖：http://jsbin.com/ugexag/1

可以在jsbin看，當你將鼠標懸停在一個「列」的數據，每一行通過顯示在工具提示hoverColumn（）函數。我很想找到一種方法來讓工具提示僅在單個數據點懸停時出現。在gRaphael文檔中我沒有看到任何關於此的信息。

Answer 1

有樣的linechart demo右下方象限的這個例子的。 我今天晚些時候看看它，並在這裏更新我所找到的內容。我懷疑hoverColumn不使用，或者是創造性地運用，因爲當我用它，我得到了懸停事件y是所有y值對x列的平均值。

更新：看完它後，我發現你找到了什麼，訣竅是隻有一個演示列排隊在兩條線。如果你每年都繪製圖表，你的年份列肯定會在所有行上重現。所以這不太方便。

我測試的是（在該線型圖演示控制檯連接）：

var r = Raphael("holder"); 
var lines = r.linechart(330,250,300,220,[ 
    [ 1, 2, 3, 4, 5, 6, 7],[ 2, 3, 4, 5, 6, 7, 8],[9,10] 
    ],[ 
    [10,10,10,10,10,10,10],[20,20,20,20,20,20,20],[5,25] 
    ],{nostroke:false, axis:"0 0 1 1", symbol: "circle", smooth: true}); 
lines.hoverColumn(function(){ 
    this.tags=r.set(); 
    for(var i=0;i<this.y.length;i++){ 
     this.tags.push(r.tag(this.x,this.y[i],this.values[i],160,10).insertBefore(this)); 
    } 
    }, function(){ 
    this.tags && this.tags.remove(); 
    }); 

至少說明了問題。問題確實在於hoverColumn和文檔。沒有提到hover其實大部分信息都是一樣的傳遞給它的this。所以，你可以重寫了最後陳述爲：

lines.hover(function({ 
    this.tags=r.set(); 
    this.tags.push(r.tag(this.x,this.y,this.value,160,10).insertBefore(this)); 
}, function(){ 
    this.tags && this.tags.remove(); 
}); 

注意value現在是單數和不帶指數，也沒有y。
最後你可以通過刪除使用set()的進一步簡化它：

lines.hover(function(){ 
    this.tag = r.tag(this.x,this.y,this.value,160,10).insertBefore(this); 
}, function(){ 
    this.tag && this.tag.remove(); 
});