避免在迷你条形图的条形间距中显示工具提示

Question

我在条形图之间创建了 space。但我只想在栏上显示工具提示，而不是空白 space。

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

也许您可以将鼠标移动侦听器绑定到您的迷你图对象，以记录鼠标移动及其位置。并决定是否显示工具提示。

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/

避免在迷你条形图的条形间距中显示工具提示

Avoid to show tooltip in barspacing of sparkline bar chart

jquery

css

sparklines