2011-03-15 12 views
6

Tengo una pregunta sobre las señales en el eje x. Trabajo con jqPlot 0.9.7jqPlot - marcas de varias líneas con ángulo en el eje x

Mis ticks son multilínea, así: a <br> b <br> c <br> d. Yo uso renderer: $.jqplot.CategoryAxisRenderer y funciona bien, entonces los ticks se muestran en trabajos multiline y
.

Ahora necesito girarlos 30º. Intenté 'ángulo: -30' pero no funciona .

Con esta 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' 
     } 

} 

Las garrapatas se muestran en una sola, girado, la línea de tiempo. Ni <br> ni \n se interpretan como necesito. Este es el mejor enfoque que he encontrado.

¿Hay alguna solución para esto? ¿Cómo podría escribir tics de texto rotados?

Cualquier sugerencia sería muy útil para mí. Gracias de antemano. Saludos cordiales

Respuesta

16

Para que la sintaxis correcta funcione, debe incluir los siguientes scripts junto con los scripts jqPlots predeterminados.

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

(Los archivos anteriores viene con el paquete jqPlot).

A continuación, añada lo siguiente a la lista de opciones de trazado

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

Luego, su

tickOptions: { 
     angle: -30, 
    } 

será eficaz.

p. Ej.

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

Ejemplo de jqPlot se puede encontrar aquí: http://www.jqplot.com/tests/rotated-tick-labels.php

+0

tengo esto en mi guión, pero esto no está haciendo nada y sí :(Yo tengo los guiones – AntonioCS

3

No se olvide de añadir:

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