2013-03-06 36 views
7

HintergrundPrimefaces Diagramm + jqplot extender - gerundete Wert in der y-Achse

Ich habe eine primefaces Liniendiagramm (Datum auf x, ganze Zahl> = 0 auf y) mit jqplot Optionen erweitert:

function extender() { 
     this.cfg.axes = { 
      xaxis : { 
       renderer : $.jqplot.DateAxisRenderer, 
       rendererOptions : { 
        tickRenderer:$.jqplot.CanvasAxisTickRenderer 
       }, 
       tickOptions : { 
        fontSize:'10pt', 
        fontFamily:'Tahoma', 
        angle:-40,      
        formatString:'%b-%y' 
       }, 
       tickInterval:'2592000000' 
      }, 
      yaxis : { 
       min: 0, 
       rendererOptions : { 
        tickRenderer:$.jqplot.CanvasAxisTickRenderer, 
       }, 
       tickOptions: { 
        fontSize:'10pt', 
        fontFamily:'Tahoma', 
        angle:0, 
        formatString: '%d' 
       } 
      }, 
     }; 
     this.cfg.axes.xaxis.ticks = this.cfg.categories; 
    } 

ich bin mit dem jqplot Extender benutzerdefinierten Datums Intervall auf der x-Achse und das funktioniert gut haben:

Working fine

Problem

Wenn ich die Option min: 0 in der y-Achse die Formatierung von Zahlen wirklich abgefahrene geht, vor allem, wenn kleine Werte sind:

Fraction number

Beachten Sie, dass das minY Attribut in primefaces funktioniert nicht (wahrscheinlich, weil der Extender es überschreibt)

Um das zu beheben, verwende ich formatString: %d. Es funktioniert, aber es schafft Probleme mit der Anzahl der Ticks:

enter image description here

Wie man auf dem Screenshot zu sehen, gibt es mehrmals die Leitung für den Wert 1.

Frage

Wie kann ich sicherstellen, dass ich nicht mehrmals denselben Wert auf der y-Achse bekomme?

Ich kann nicht wirklich eine statische Anzahl von Ticks haben, weil wenn die Daten groß werden (sagen wir etwa 100), möchte ich mehrere Werte auf der y-Achse (zB 20, 40, etc ...)

Antwort

5

Ich habe es geschafft, mein Problem mit Ideen von Mahasse zu lösen.

Das Definieren des Werts max, wie von Mehasse vorgeschlagen, löste nicht die unerwünschten Zeckenlinien, aber half mir, die Antwort zu finden.

Standardmäßig möchte primefaces/jqplot 4 Y-Achsen-Tick-Linien haben. Wenn der Maximalwert unter 4 liegt, wird das y-Achsen-Etikett beim Aufrunden dupliziert (formatString: '%d').

Was ich im Grunde wollen, ist das Tick-Intervall entweder Max(y) \ 4 wenn Max(y) > 4 oder 1 anders:

function actionPlanExtender() { 
     var series_max =maxSeries(this.cfg.data); 
     var numberOfTicks =4; 
     var tickInterval = Math.max(1, Math.ceil(series_max/numberOfTicks)); 
     this.cfg.axes = { 
      xaxis : { 
       renderer : $.jqplot.DateAxisRenderer, 
       rendererOptions : { 
        tickRenderer:$.jqplot.CanvasAxisTickRenderer 
       }, 
       tickOptions : { 
        fontSize:'10pt', 
        fontFamily:'Tahoma', 
        angle:-40,      
        formatString:'%b-%y' 
       }, 
       tickInterval:'2592000000' 
      }, 
      yaxis : { 
       min: 0, 
       rendererOptions : { 
        tickRenderer:$.jqplot.CanvasAxisTickRenderer, 
       }, 
       tickOptions: { 
        fontSize:'10pt', 
        fontFamily:'Tahoma', 
        angle:0, 
        formatString: '%d', 
       }, 
       tickInterval: tickInterval 
      }, 
     }; 
     this.cfg.axes.xaxis.ticks = this.cfg.categories; 
    } 

die y-max-Wert zu berechnen, ich den Plot Wert bekommen this.cfg.data verwendet, die ist die Form [series_1,..., series_n] mit series_i = [[x_1, y_1],..., [x_m, y_m]]

die maxSeries Funktion wie folgt aussieht:

function maxSeries(datas) { 
    var maxY = null; 
    var dataLength = datas.length; 
    for (var dataIdx = 0; dataIdx < dataLength; dataIdx++) { 
     var data = datas[dataIdx]; 
     var l = data.length; 
     for (var pointIdx = 0; pointIdx < l; pointIdx++) { 
      var point = data[pointIdx]; 
      var y = point[1]; 
      if (maxY == null || maxY < y) { 
       maxY = y; 
      } 
     } 
    } 
    return maxY; 
} 

Beachten Sie, dass in meinem Fall ich meinen Fall kenne ich keinen Wert unter 0. Dieser Code sollte aktualisiert werden, wenn dies nicht der Fall ist.

2

Ich war überrascht, als ich anfing, JQPlot zu verwenden, dass es vernünftige Mittellinienetiketten nicht von der Schachtel auswählt. Es ist eigentlich einfach zu beheben.

Ich gehe davon aus, dass Sie möchten, dass Ihre Y-Achse bei Null beginnt. Wenn das nicht stimmt, müssen Sie diesen Code ein wenig ändern.

// This is YOUR data set 
var series = [882, 38, 66, 522, 123, 400, 777]; 

// Instead of letting JQPlot pick the scale on the y-axis, let's figure out our own. 
var series_max = Math.max.apply(null, series); 
var digits = max.toString().length; 
var scale = Math.pow(10, max_digits - 1); 

var max = (Math.ceil(series_max/scale)) * scale; 

$.jqplot(
    'foo', 
    [series], 
    { 
     axes: { 
      yaxis: { 
       min: 0, 
       max: max 
      } 
     } 
     // Put your other config stuff here 
    } 
) 

Der Grundgedanke dabei ist, dass wir bis zu einigen schönen, runden Wert nahe dem Maximalwert in unserer Serie runden möchten. Insbesondere werden wir auf die nächste Zahl aufgerundet, die Nullen in allen Ziffern außer der am weitesten links hat. Das Maximum 882 ergibt also eine y-Achse von maximal 1000.

+0

Danke dafür! Es hat mein Problem nicht gelöst, aber es gab eine gute Idee, wie es gelöst werden kann. Ich werde eine Antwort posten, um zu erklären, wie ich es gemacht habe – phoenix7360

Verwandte Themen