避免在条形图的条形图中显示工具提示

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/