2012-08-09 14 views
5

Vorrei utilizzare il jQPlot e renderò un asse come una serie di valori di data - pacchetto grezzo jQPlot può essere fonte qui:Perché jQPlot dateAxisRenderer non funziona correttamente?

http://www.jqplot.com/

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

Il problema è questo :

a) asseX non iniziare sul lato sinistro e anche mostrerà valori che io non voglio vedere

b) lo stesso problema a destra con più numeri che non sono necessari

c) mi piacerebbe avere tutti i giorni sull'asse x 1 2 3 4 5 ... non 31 3 6 9 ...

d) è possibile impostare una sorta di compensazione alla parte inferiore (solo un po '...)

Screenshot: Picture from current status

My Code:

$.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 
     } 
    } 
}); 

risposta

10

Per iniziare, si dovrebbe cercare di impostare il tickInterval a "1 giorno" :)

Dopo questo, il trucco è quello di impostare la Xaxis min e max secondo il primo e l'ultimo valori della propria matrice date .

Ecco un esempio:

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 
     } 
    } 
}); 

Inoltre penso che non è necessaria alcuna pad.

Edit (nuova jsFiddle aggiunta):

È possibile verificare questo codice di esempio qui: http://jsfiddle.net/JhHPz/4/

+0

Bene ok funziona. Ma nella linea di fondo (xaxis jqplot non mostra tutti i giorni come numero 1, 3, 6, 9 invece di 1,2,3,4,5,6 ... i "punti" dei dati sono contrassegnati ... – spotlr

+0

Mi spiace, mi manca il clic quando copia/incolla il link jsFiddle. Ho aggiornato la mia risposta con una nuova Inoltre, cosa intendi quando dici: '' i "punti" dai dati sono contrassegnati ''? – TwystO

+0

Grazie, funziona alla grande ora;) – spotlr

Problemi correlati