带有省略号的 jqplot 轴刻度标签答案

【问题标题】：jqplot axis tick labels with ellipsis带有省略号的 jqplot 轴刻度标签
【发布时间】：2014-02-11 21:43:48
【问题描述】：

我有一个使用 jqplot 创建多个图表的应用。

这是我遇到问题的图表之一的示例：

如您所见，一些刻度标签很长，导致图表呈现不正确。我正在使用$.jqplot.CanvasAxisTickRenderer 来旋转刻度标签，如图所示，所以我认为我不能使用 CSS 设置刻度标签文本的样式。有没有办法可以使用 CSS 或格式化程序缩短刻度标签文本。

我正在寻找一种可以简单地缩短文本并添加类似于text-overflow : ellipsis CSS 样式的省略号的效果。

编辑：：

这是尝试css方法后的新截图。

如您所见，绝对定位的刻度标签与它们所代表的条不完全对齐，它们超出了父容器。答案中提供的 css 方法使用了 90 度旋转，但我更喜欢 60 度旋转，这会导致标签与各自的条不对齐。

【问题讨论】：

标签： jquery css label jqplot

【解决方案1】：

试试这个：

从您的代码中删除 tickRenderer 属性。欲了解更多信息JsFiddle Link 您可以根据需要更改最大宽度。

.jqplot-xaxis .jqplot-xaxis-tick {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transform: rotate(90deg);
    padding-left: 53px;
    padding-top: 31px;
}

【讨论】：

我尝试使用您的建议，但出现了一些奇怪的行为。我用新的屏幕截图更新了我原来的问题。
您必须使用填充来调整所需的内容。如果您希望它们占用更少的空间，请减小最大宽度。

【解决方案2】：

我终于做到了！根据@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 成功处理程序中。

【讨论】：