1

ここに折れ線グラフがあります： http：//jsbin.com/ugexag/1

jsbinで、1つの「列」にカーソルを合わせると、各行のデータがhoverColumn（）関数を介してツールチップに表示されることがわかります。個々のデータポイントにカーソルを合わせたときにのみツールチップを表示する方法を見つけたいと思います。gRaphaelのドキュメントにはこれについて何も表示されていません。

4

1 に答える 1

2

折れ線グラフのデモの右下の象限に、このような例があります。私は今日後でそれを見て、私が見つけたものでここで更新します。hoverColumn使用されていないか、クリエイティブに使用されていると思われます。これを使用したときに、yホバーイベントで取得したのは、列のすべてのy値の平均でした。x

更新：それを見た後、私はあなたが見つけたものを見つけました、トリックは両方の行に並んでいるデモ列の1つだけでした。1年ごとに何かをグラフ化する場合、年の列は間違いなくすべての行で繰り返されます。したがって、これはあまり便利ではありません。

私がテストしたのは（リンクされた折れ線グラフのデモのコンソールで）：

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();
 });
于 2012-09-28T23:54:38.590 に答える