gRaphael 도서관 - 여러 줄 선 차트, 개별 툴팁

Question

내가 여기에 선 차트가 있습니다 http://jsbin.com/ugexag/1

각 라인에 대해 하나의 '열'을 통해 데이터를 가져 때의 jsbin에서 볼 수

를 통해 툴팁에 표시 hoverColumn() 함수. 개별 데이터 요소를 마우스로 가리키면 툴팁을 표시하는 방법을 찾고 싶습니다. 나는 이것에 관해 gRaphael 문서에서 아무 것도 볼 수 없다.

Answer 1

linechart demo의 오른쪽 하단 사분면에는 종류의 예가 있습니다. 오늘 나중에 살펴보고 여기에서 내가 찾은 내용으로 업데이트하십시오. hoverColumn이 사용되지 않았거나 창조적으로 사용 된 것으로 의심됩니다. 왜냐하면 내가 사용했을 때 열의 모든 y 값의 평균이었던 y 호버 이벤트에 대해 가져 왔기 때문입니다.

업데이트 : : 내가 본 것을 발견 한 후 트릭은 두 줄에 데모 열 중 하나만 줄 지어있는 것이 었습니다. 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을 수행 그래서 당신은 마지막 문을 다시 작성할 수 있습니다. 나는 아주 약간 각 라인의 플롯 포인트를 상쇄하여 원하는 결과를 달성했습니다

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