Question

我的jqplot图表有时会将长文本作为刻度文本。

我想询问是否有任何方法可以缩短该文本（使用jqplot）并在刻度标签上添加带全文的工具提示？

Answer 1

我希望这会有助于寻找相同解决方案的人，最初由我here回答。

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

基于Gyandeep's answer，我使用的确切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成功处理程序中。

文本省略号应用于jQPLOT AXIS TICKS

1 个答案: