Как отобразить всплывающую подсказку о событии mouseover на datalabel?

Как отобразить всплывающую подсказку о событии mouseover на datalabel в баре?Как отобразить всплывающую подсказку о событии mouseover на datalabel?

$(document).ready(function(){ 
var yAxisLabels = ["Label1", "Label2", "Label3", "Label4"]; 
var legendValues = ["series1", "series2", "series3", "series4"]; 
var pLabels1 = ['70%','38%','71%','28%']; 
var pLabels2 = ['27%','49%','27%','44%']; 
var pLabels3 = ['2%','10%','2%','17%']; 
var pLabels4 = ['1%','4%','1%','12%']; 
var group4 = [52,528,129,264]; 
var group3 = [94,1388,394,401]; 
var group2 = [1446,7130,5591,1004]; 
var group1 = [3772,5512,14957,633]; 
    var series = [ 
         { pointLabels: { labels: pLabels4 }}, 
         { pointLabels: { labels: pLabels3 }}, 
         { pointLabels: { labels: pLabels2 }}, 
         { pointLabels: { labels: pLabels1 } }]; 
var plot = $.jqplot('chart', [[[52,1],[528,2],[129,3],[264,4]], [[94,1],[1388,2],[394,3],[401,4]], [[1446,1],[7130,2],[5591,3],[1004,4]], [[3772,1],[5512,2],[14957,3],[633,4]]], { 
       stackSeries: true, 
       seriesDefaults: { 
        shadow: false, 
        renderer: $.jqplot.BarRenderer, 
        rendererOptions: { fillToZero: true, barDirection: 'horizontal', highlightMouseOver: true}, 
        pointLabels: { 
         show: true, stackedValue: true, location: 'w', hideZeros: true 
        } 
       }, 
       axes: { 
        xaxis: { 
         tickOptions: { 
          show: true, 
          mark: 'cross', 
          formatString: "%'d", 
          showGridline: true 
         }, 
         min: null, 
         max: null, 
         showTickMarks: true 
        }, 
        yaxis: { 
         renderer: $.jqplot.CategoryAxisRenderer, 
         ticks: yAxisLabels 
        } 
       }, 
       grid: { 
        gridLineColor: '#ffffff', /**/ 
        borderColor: '#509790', 
        shadowWidth: 0, 
        borderWidth: 0, 
        background: 'rgba(0,0,0,0)', 
        shadow: false 
       },    
       series: series 
      }); 
});

jsfiddle

источник

2014-01-09 Pandiyan Cool

Datalabel вы имели в виду, когда мышь находится над процентом в вашем примере? И что бы вы хотели отображать в подсказке? –

@YuriyGalanter да, я хочу отобразить процентное значение в подсказке для подсказки мыши на барах –

Итак, вы хотите отображать процент в виде подсказки, но скрыть его от метки на панели? –

Вы можете сделать что-то вроде этого:

$(".jqplot-point-label").hover(
function() {
//Do some stuff when you enter the data label area
}, function() {
// Do some stuff when you leave data label area
});

Важная вещь: .jqplot-point-label селектор.

источник

2014-01-09 15:24:17 BugiLesPaul

Я довольно уверен, что вы легче/покрасивее/родной путь, чем это, но используя этот кусок:

$('.jqplot-point-label').attr('title', 
    function() { 
    var seriesNumber = $(this).attr('class').split(' ')[1].split('-')[2]; 
    return legendValues[seriesNumber] 
    } 
);

Вы можете найти все метки и присвоить это название атрибута, соответствующее значение легенды.

Демо: http://jsfiddle.net/dhEE5/9/

источник

2014-01-09 15:34:29

Как отобразить всплывающую подсказку о событии mouseover на datalabel?

ответ

Смежные вопросы