rotar Flot Tick etiquetas

Question

Estoy intentando rotar las fechas en la parte inferior de mi gráfica para que aparezcan verticales frente a horizontales. Estoy usando flot-tickrotor pero parece que no funciona correctamente.

xaxis: { 
    rotateTicks: 110, 
    mode: "time", 
    timeformat: "%m/%d", 
    minTickSize: [7, "day"], 
    ticks: cpudatearray 
} 

El resultado final no es el correcto, todo parece complicado.

Answer 1

Es posible que tenga mejor suerte acaba de manejar esto con CSS en lugar de utilizar el tapón en:

#flotPlaceholder div.xAxis div.tickLabel 
{  
    transform: rotate(-90deg); 
    -ms-transform:rotate(-90deg); /* IE 9 */ 
    -moz-transform:rotate(-90deg); /* Firefox */ 
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */ 
    -o-transform:rotate(-90deg); /* Opera */ 
    /*rotation-point:50% 50%;*/ /* CSS3 */ 
    /*rotation:270deg;*/ /* CSS3 */ 
} 

cambiar Obviamente el ángulo a lo que sea que está tratando de lograr. Si desea usar esto para el eje y, simplemente cambie el selector div.xAxis.

El resultado después de la prueba en mi propio gráfico flot:

Answer 2

@ respuesta de Brendan parece que podría funcionar bastante bien, sin embargo antes de implementar eso, debería considerar si esto es algo que realmente quiere hacer de una perspectiva de usabilidad.

Si la longitud máxima de texto que está mostrando es de 5 caracteres (de su pregunta, una cadena 'MM DD'), sus gráficos probablemente serían más fáciles de leer si solo marcara cada tres 'ticks' (o sin embargo, muchos tienen sentido para sus datos).

Realicé un ejercicio similar con mis gráficos en una aplicación tipo tablero de instrumentos. Los usuarios insistieron en que necesitaban una etiqueta X para cada resultado, pero dado que el gráfico tenía 96 tics, esto creó bastante texto una vez que los giré 90 grados como lo está intentando hacer. Cuando les mostré una maqueta con una etiqueta X horizontal por cada 6º punto, prefirieron esa opción y eso es lo que optamos por la solución entregada. (Su millaje puede variar ..)