jquery - 带省略号的 jqplot 轴刻度标签

Question

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

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

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

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

编辑::

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

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

Answer 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;
}