应用于 jQPLOT AXIS TICKS 的文本省略号答案

【问题标题】：Text ellipsis applied to jQPLOT AXIS TICKS应用于 jQPLOT AXIS TICKS 的文本省略号
【发布时间】：2013-11-19 09:21:26
【问题描述】：

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

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

【问题讨论】：

@zeltar 你有没有找到任何解决这个要求的方法？我需要在任何地方都提供确切但没有具体的解决方案。
@Babu：不，我在 jqplot 库中没有找到任何东西。我刚刚构建了一个函数来预处理刻度文本：关于刻度数，该函数将文本切割为最大长度和 3 个句点。 (...)
是的，我也这样做了，并在这里发布了我的答案。

标签： jqplot

【解决方案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 成功处理程序中。

【讨论】：