1

我正在尝试将鼠标悬停功能添加到我的轴刻度中。我想要的是仅在悬停时显示长刻度全文，否则它将仅显示几个字符。我正在向 .jqplot-xaxis-tick 添加悬停事件。但它甚至不响应悬停。请建议！

.jqplot-xaxis-tick {
    top: 0px;
    /* initial position untill tick is drawn in proper place */
    left: 15px;



/*    padding-top: 10px;*/
    vertical-align: top;
     overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}
.jqplot-xaxis-tick :hover{
overflow:visible;

    white-space: normal; 
    width: auto;
    position: absolute;
    background-color:yellow;
}
4

3 回答 3

1

由于画布的 z-index 位于整个图表的顶部，因此未检测到悬停。我做了以下操作，现在它通过 CSS 省略号缩短了提示，并在悬停时显示带有全名的工具提示。

根据Gyandeep 的回答，我使用的确切 JS 和 CSS 是，

Javascript：

$('div.jqplot-xaxis-tick').each(function (i, obj) {
    $(this).prop('title', ($(this).text()));
    $(this).css('z-index', 999);  // this is important otherwise mouseover won't trigger.
});

CSS：

.jqplot-xaxis .jqplot-xaxis-tick {
    position: absolute;
    white-space: pre;
    max-width: 92px;  // Change it according to your need
    overflow: hidden;
    text-overflow: ellipsis;
}

每次绘制图表后都需要执行 JavaScript 部分。最好在绘制图表后立即将它们放在 AJAX 成功处理程序中。

于 2014-03-19T12:03:56.900 回答
0

我设法为轴刻度添加了一种工具提示类型的功能。当我将鼠标悬停在它们上时，它会显示一个带有全文的单独框，否则仅显示 3-4 个字符。代码是这样的

$($('.jqplot-xaxis-tick')[i]).bind('mouseover', function () {

        //   var m= '-webkit-marquee';


  $($('.jqplot-xaxis-tick')[i]).css('white-space','pre-line');
  $($('.jqplot-xaxis-tick')[i]).css('overflow','visible');  
  $($('.jqplot-xaxis-tick')[i]).css('width','auto'); 

  $($('.jqplot-xaxis-tick')[i]).css('position','absolute');
  $($('.jqplot-xaxis-tick')[i]).css('background-color','#666666');
  $($('.jqplot-xaxis-tick')[i]).css('color','white');
  $($('.jqplot-xaxis-tick')[i]).css('top','-45px');









// $($('.jqplot-xaxis-tick')[i]).css('overflow-x',m);
//  console.log($($('.jqplot-xaxis-tick')[i]).text());



   }).bind('mouseout', function () {
 //var m= '';
//$($('.jqplot-xaxis-tick')[i]).css('overflow-x',m);
 $($('.jqplot-xaxis-tick')[i]).css('white-space','nowrap');
  $($('.jqplot-xaxis-tick')[i]).css('overflow','hidden');  
  $($('.jqplot-xaxis-tick')[i]).css('width','50'); 
 $($('.jqplot-xaxis-tick')[i]).css('background-color','');
  $($('.jqplot-xaxis-tick')[i]).css('color','grey');
$($('.jqplot-xaxis-tick')[i]).css('top','0px');


 });
于 2013-07-18T05:47:18.860 回答
0

这是我用来显示每月高温和低温的解决方案。将鼠标悬停在 x 轴刻度上将显示带有活动月份名称和临时时间的警报。

// Set up hover function
$('#monthlyTemps .jqplot-xaxis-tick').hover(function () {
    setActiveColumn($(this));
});

// Set active column
function setActiveColumn(sender) {
    // Display values
    var monthName = sender.text();
    var monthIndex = monthNames.indexOf(monthName);
    var monthLowTemp = getMonthLowTemp(monthIndex);
    var monthHighTemp = getMonthlHighTemp(monthIndex);
    alert(monthName + ': ' + monthLowTemp + ' / ' + monthHighTemp);
}

// Get month low temp
function getMonthLowTemp(monthIndex) {
    var value= $("#monthlyTemps .jqplot-point-label.jqplot-series-0.jqplot-point-" + monthIndex).text();
    return value;
}

// Get month high temp
function getMonthlyHighTemp(monthIndex) {
    var value= $("#monthlyTemps .jqplot-point-label.jqplot-series-1.jqplot-point-" + monthIndex).text();
    return value;
}

var monthNames = new Array(12);
monthAbbreviations[0] = "Jan";
monthAbbreviations[1] = "Feb";
monthAbbreviations[2] = "Mar";
monthAbbreviations[3] = "Apr";
monthAbbreviations[4] = "May";
monthAbbreviations[5] = "Jun";
monthAbbreviations[6] = "Jul";
monthAbbreviations[7] = "Aug";
monthAbbreviations[8] = "Sep";
monthAbbreviations[9] = "Oct";
monthAbbreviations[10] = "Nov";
monthAbbreviations[11] = "Dec";
于 2014-01-20T16:31:18.920 回答