jqplot axis tick labels with ellipsis

问题

I have an app that creates several charts using jqplot.

Here is an example of one of the charts I'm having trouble with:

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.

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

Edit::

Here is a new screenshot after trying the css method.

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.

回答1:

try this:

Remove the tickRenderer property from your code. for more info JsFiddle Link you can change the max-width according to your need.

.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:

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

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.

来源：https://stackoverflow.com/questions/21713679/jqplot-axis-tick-labels-with-ellipsis

标签

jquery

css

label

jqplot