jqplot轴用省略号勾选标签

我有一个应用程序，使用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; } 

Answer 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成功处理程序中。