jqplot轴刻度标签与省略号 [英] jqplot axis tick labels with ellipsis

问题描述

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

I have an app that creates several charts using jqplot.

图表我遇到问题：

正如你所看到的，一些刻度标签很长，导致图表呈现不正确。我使用 $。jqplot.CanvasAxisTickRenderer 为了旋转刻度标签如图所示，所以我不认为我可以使用CSS样式的刻度标签文本。是否有一种方法可以使用CSS或格式化程序缩短刻度标签文本。

As you can see some of the tick labels are quite long and causing the chart to render incorrectly. I am using $.jqplot.CanvasAxisTickRenderer in order to rotate the tick labels as shown so I don't think I can style the tick label text using CSS. Is there a way I can shorten the tick label text using CSS or a formatter.

我正在寻找一个效果，只是缩短文本，并添加一个省略号类似于 text-overflow：ellipsis CSS样式。

I'm looking for an effect that simply shortens the text and adds an ellipsis similar to the text-overflow : ellipsis CSS style.

编辑：

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

Here is a new screenshot after trying the css method.

正如你所看到的，绝对定位的刻度标签不完全排列它们表示并且它们在父容器之外。答案中提供的css方法使用了90度旋转，但我倾向于60度旋转，这导致标签不与其各自的条对齐。

As you can see, the absolutely positioned tick labels don't quite line up with the bars they represent and they go outside the parent container. The css method provided in the answer used a 90 degree rotation, but I would prefer the 60 degree rotation, which causes the labels to not line up with their respective bars.

推荐答案

最后，我能够实现这一点！基于@ Gyandeep的答案，我使用的确切JS和CSS是

Finally I was able to achieve this! Based on the @Gyandeep's answer, the exact JS and CSS I used are,

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

The JavaScript part needs to be executed after every rendering of chart. It's better to put them right after plotting the chart and may in the AJAX success handler.

这篇关于jqplot轴刻度标签与省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！