2016-09-21 7 views
1

막대 그래프 사이에 간격을 만들었습니다. 하지만 빈 공간이 아닌 술집에서만 툴팁을 보여주고 싶습니다.스파크 라인 막 대형 차트의 barspacing에 툴팁 표시 안 함

var values = [100.00,100.00,100.00,80.00,80.00,66.67]; 

// Draw a sparkline for the #sparkline element 
$('#sparkline').sparkline(values, { 
    type: "bar", 
    // Map the offset in the list of values to a name to use in the tooltip 
    tooltipFormat: '{{offset:offset}} {{value}}', 
    barSpacing: '50px', 
    tooltipValueLookups: { 
     'offset': { 
      0: 'Jul', 
      1: 'Aug', 
      2: 'Sep', 
      3: 'Oct', 
      4: 'Nov', 
      5: 'Dev', 
     } 
    }, 
}) 

jsfiddle은 -

답변

1

http://jsfiddle.net/RsbHC/396/은 어쩌면 당신은, 당신의 스파크 객체에 바인드에게 마우스 이동 청취자를 추가 할 수 있습니다 마우스 이동과 possition를 기록 할 수 있습니다. 툴팁을 표시할지 여부를 결정하십시오.

var values = [100.00,100.00,100.00,80.00,80.00,66.67]; 

var barSpacing = 50; 
var barWidth = 4; 
$('#sparkline').bind('mousemove',function(e){ 
    var xPosInBar = e.offsetX % (barSpacing + barWidth); 
    if(xPosInBar > barWidth){ 
    $('#jqstooltip').hide(); 
    }else{ 
    $('#jqstooltip').show(); 
    } 
}); 

// Draw a sparkline for the #sparkline element 
$('#sparkline').sparkline(values, { 
    type: "bar", 
    // Map the offset in the list of values to a name to use in the tooltip 
    tooltipFormat: '{{offset:offset}} {{value}}', 
    barWidth: barWidth+'px', 
    barSpacing: barSpacing+'px', 
    tooltipValueLookups: { 
     'offset': { 
      0: 'Jul', 
      1: 'Aug', 
      2: 'Sep', 
      3: 'Oct', 
      4: 'Nov', 
      5: 'Dev', 
     } 
    }, 
}); 

jsfiddle - 당신은 ... 흠 ... 함께 TooltipClass을 소유 http://jsfiddle.net/RsbHC/397/

+0

당신 CANN 세트'tooltipClassname' – Marcus

+0

이 솔루션은했다. 감사. – TBAG