2012-08-09 22 views
5

ich möchte die jQPlot bedienen und wird eine Achse als eine Reihe von Datumswerten machen - das rohe Paket von jQPlot können Schriftart hier:Warum funktioniert jQPlot dateAxisRenderer nicht korrekt?

http://www.jqplot.com/

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

Das Problem ist dieses :

a) xaxis auf der linken Seite nicht gestartet werden, und es wird auch Werte zeigen, dass ich nicht wollen,

sehen 0)

b) genau das gleiche Problem auf der rechten Seite mit mehr Zahlen, die nicht brauchen

c) Ich möchte alle Tage auf der Xaxis haben 1 2 3 4 5 ... nicht 31 3 6 9 ...

d) ist es möglich, eine Art von Offset auf den Boden (nur ein wenig zu setzen ...)

Screenshot: Picture from current status

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

Antwort

10

zu starten, sollten Sie versuchen, Ihre tickInterval bis auf „1 Tag“ :)

Danach ist der Trick, um Ihre xaxis min und max eingestellt gemäß den ersten und letzten Werten Ihrer Termine Array .

Hier ist ein Beispiel:

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

Auch ich denke, kein Pad benötigt wird.

Edit (neue jsFiddle hinzugefügt):

Sie können testen, diesen Beispielcode hier: http://jsfiddle.net/JhHPz/4/

+0

Na ok das funktioniert. Aber in der unteren Zeile (xaxis jqplot zeigt nicht alle Tage als Nummer 1, 3, 6, 9 statt 1,2,3,4,5,6 ... die "Punkte" aus Daten sind markiert ... – spotlr

+0

Entschuldigung, ich verpasse mit Sicherheit einen Fehler beim Kopieren/Einfügen des jsFiddle-Links Ich habe meine Antwort mit einer neuen aktualisiert Also, was meinst du, wenn du sagst: '' die "Punkte von Daten sind markiert ''? – TwystO

+0

Danke, funktioniert jetzt gut;) – spotlr

Verwandte Themen