Question

如何在条形图中的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

Answer 1

我很确定这比那更容易/更漂亮/本土化，但使用这件作品：

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

您可以找到每个标签并为其指定标题属性对应的图例值。

演示：http://jsfiddle.net/dhEE5/9/

Answer 2

您可以这样做：

$( ".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 选择器。

如何在datalabel上显示mouseover事件的工具提示？

2 个答案: