jqPlot - graduations multilignes avec l'axe des abscisses

Question

J'ai une question sur les graduations en abscisse. Je travaille avec jqPlot 0.9.7

Mes tiques sont multilignes, comme ceci: a <br> b <br> c <br> d. J'utilise renderer: $.jqplot.CategoryAxisRenderer et cela fonctionne bien, donc les marques montrent en multiline et
fonctionne.

Maintenant, je dois les faire pivoter 30º. J'ai essayé «angle: -30», mais il ne fonctionne pas .

Avec cette 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' 
     } 

} 

Les tiques sont présentés en une seule, rotation, longue ligne. Ni <br> ni \n ne sont interprétés comme j'ai besoin. C'est la meilleure approche que j'ai trouvée.

Y at-il une solution pour cela? Comment pourrais-je écrire des ticks de texte pivotés?

Toute suggestion serait très utile pour moi. Merci d'avance. Cordialement

Answer 1

Pour que la syntaxe correcte fonctionne, vous devez inclure les scripts suivants avec les scripts par défaut jqPlots.

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

(Les fichiers ci-dessus est livré avec le paquet jqPlot).

Ensuite, ajoutez ce qui suit les options de tracé liste

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

Ensuite, votre

tickOptions: { 
     angle: -30, 
    } 

sera efficace.

par exemple.

.... 
    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' 
      } 
     } 
    }, 
.... 

Exemple de jqPlot se trouve ici: http://www.jqplot.com/tests/rotated-tick-labels.php

Answer 2

Ne pas oublier d'ajouter:

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