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

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