スパークラインの棒グラフの棒グラフにツールチップを表示しないようにする

Question

棒グラフ間にスペースを作成しました。しかし、私は空白のスペースにないバーにのみツールチップを表示したい。

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 - http://jsfiddle.net/RsbHC/396/

Answer 1

たぶん、あなたは、マウスの移動とその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 - あなたは... EHM ...とTooltipClassを所有http://jsfiddle.net/RsbHC/397/