2012-08-09 18 views
5

me gustaría usar el jQPlot y darán un eje como una serie de valores de fecha - el paquete de prima de jQPlot puede ser la fuente aquí:¿Por qué jQPlot dateAxisRenderer no funciona correctamente?

http://www.jqplot.com/

http://www.jqplot.com/docs/files/plugins/jqplot-dateAxisRenderer-js.html

El problema es el siguiente :

a) XAXIS no empezar por el lado izquierdo y también se mostrará valores que yo no quiero ver

b) el mismo problema a la derecha con más números que no necesitan

c) me gustaría tener todos los días en el eje x 1 1 3 4 5 ... no 31 3 6 9 ...

d) es posible establecer una especie de compensación a la parte inferior (sólo un poco ...)

Captura de pantalla: Picture from current status

Mi Código:

$.jqplot('chartdiv', [ 
    [ 
     ['2012-08-01', 0], 
     ['2012-08-02', 0], 
     ['2012-08-03', 0], 
     ['2012-08-04', 0], 
     ['2012-08-05', 0], 
     ['2012-08-06', 0], 
     ['2012-08-07', 1], 
     ['2012-08-08', 0], 
     ['2012-08-09', 6], 
     ['2012-08-10', 0], 
     ['2012-08-11', 0], 
     ['2012-08-12', 0], 
     ['2012-08-13', 0], 
     ['2012-08-14', 0], 
     ['2012-08-15', 0], 
     ['2012-08-16', 0], 
     ['2012-08-17', 0], 
     ['2012-08-18', 0], 
     ['2012-08-19', 0], 
     ['2012-08-20', 0], 
     ['2012-08-21', 0], 
     ['2012-08-22', 0], 
     ['2012-08-23', 0], 
     ['2012-08-24', 0], 
     ['2012-08-25', 0], 
     ['2012-08-26', 0], 
     ['2012-08-27', 0], 
     ['2012-08-28', 0], 
     ['2012-08-29', 0], 
     ['2012-08-30', 0], 
     ['2012-08-31', 0] 
    ] 
], { 
    title: 'Downloadstatistik', 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.DateAxisRenderer, 
      tickOptions: { 
       formatString: '%#d', 
       tickInterval: '1 month' 
      }, 
      pad: 1.0 
     }, 
     yaxis: { 
      tickOptions: { 
       formatString: '%.0f' 
      }, 
      min: 0 
     } 
    } 
}); 

Respuesta

10

Para empezar, usted debe tratar de establecer su tickInterval a "1 day" :)

Después de esto, el truco es configurar el eje x min y max de acuerdo a los valores primero y último de la matriz de fechas .

He aquí un ejemplo:

var timeline = [[ 
    ['2012-08-01', 0], ['2012-08-02', 0], ['2012-08-03', 0], 
    ['2012-08-04', 0], ['2012-08-05', 0], ['2012-08-06', 0], 
    ['2012-08-07', 1], ['2012-08-08', 0], ['2012-08-09', 6], 
    ['2012-08-10', 0], ['2012-08-11', 0], ['2012-08-12', 0], 
    ['2012-08-13', 0], ['2012-08-14', 0], ['2012-08-15', 0], 
    ['2012-08-16', 0], ['2012-08-17', 0], ['2012-08-18', 0], 
    ['2012-08-19', 0], ['2012-08-20', 0], ['2012-08-21', 0], 
    ['2012-08-22', 0], ['2012-08-23', 0], ['2012-08-24', 0], 
    ['2012-08-25', 0], ['2012-08-26', 0], ['2012-08-27', 0], 
    ['2012-08-28', 0], ['2012-08-29', 0], ['2012-08-30', 0], 
    ['2012-08-31', 0] 
]]; 
var plot = $.jqplot('chartdiv', timeline, { 
    title: 'Downloadstatistik', 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.DateAxisRenderer, 
      tickOptions: { formatString: '%#d' }, 
      tickInterval: '1 day', 
      min: timeline[0][0][0], 
      max: timeline[0][timeline[0].length-1][0] 
     }, 
     yaxis: { 
      tickOptions: { formatString: '%.0f' }, 
      min: 0 
     } 
    } 
}); 

También creo que no es necesaria ninguna almohadilla.

Editar (nueva jsFiddle añadido):

Puede probar este código de ejemplo aquí: http://jsfiddle.net/JhHPz/4/

+0

Pues bien, esto funciona. Pero en la línea inferior (xaxis jqplot no muestra todos los días como el número 1, 3, 6, 9 en lugar de 1,2,3,4,5,6 ... los "puntos" de los datos están marcados ... – spotlr

+0

Lo siento, seguramente echo de menos cuando copie/pegue el enlace jsFiddle. He actualizado mi respuesta con una nueva. Además, ¿a qué se refiere cuando dice: '' los "puntos" de los datos están marcados ''? – TwystO

+0

Gracias, funciona bien ahora;) – spotlr

Cuestiones relacionadas