jqPlot - multiline ticks with angle in x-axis

I have a question about ticks in x-axis. I work with jqPlot 0.9.7

My ticks are multiline, like this: a <br> b <br> c <br> d. I use renderer: $.jqplot.CategoryAxisRenderer and it works well, so the ticks show in multiline and

works.

Now I need to rotate them 30º. I tried 'angle: -30' but it doesn't work.

With this config:

xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        ticks: ['a <br> b <br> c <br> d' , 'p <br> q <br> r <br> s'],
        tickOptions:{
                angle: -30,
                fontSize: '9px'
        }

}

The ticks are shown in one single, rotated, long line. Neither <br> nor \n are being interpreted as I need.开发者_StackOverflow中文版 This is the best approach I have found.

Is there any solution for this? How could I write rotated text ticks?

Any suggestion would be very helpful for me. Thanks in advance. Best regards

For the correct syntax to work you need to include the following scripts along with the defaults jqPlots scripts.

• jqplot.canvasTextRenderer.min.js
• jqplot.dateAxisRenderer.min.js
• jqplot.canvasAxisTickRenderer.min.js

(The above files comes with the jqPlot package).

Then add the following to the plot options list

axesDefaults: {
    tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
},

Then your

    tickOptions: {
        angle: -30,
    }

will be effective.

e.g.

....
    series: [{renderer: $.jqplot.BarRenderer}],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
            angle: -90,
            fontSize: '10pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },
        yaxis: {    
            tickOptions: {
                angle: 0,
                fontSize: '10pt'
            }
        }
    },
....

Example from jqPlot can be found here: http://www.jqplot.com/tests/rotated-tick-labels.php

Don't forget to add :

<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>