避免在條形圖的條形圖中顯示工具提示

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