primefaces chart + jqplot extender - valore arrotondato in asse y

Question

Sfondo

Ho un grafico a linea primefaces (data x, intero> = 0 a y) esteso con opzioni jqplot:

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

sto usando l'extender jqplot di avere l'intervallo di date personalizzato su l'asse x e questo sta lavorando bene:

Problemi

Quando uso l'opzione min: 0 in y la formattazione dei numeri va molto eccentrico, soprattutto quando ci sono piccoli valori:

noti che l'attributo minY in primefaces non funziona (probabilmente perché l'extender lo sovrascrive)

Per risolvere il problema, io uso formatString: %d. Funziona ma crea problemi con il numero di zecche:

Come potete vedere nello screenshot, ci sono diverse volte la linea per il valore 1.

Domanda

Come posso assicurarmi di non ottenere più volte lo stesso valore sull'asse y?

Non riesco ad avere un numero statico di zecche perché quando i dati diventano più grandi (diciamo circa 100), voglio diversi valori sull'asse y (ad esempio 20, 40, ecc ...)

Answer 1

Sono riuscito a risolvere il mio problema utilizzando le idee dal post di Mehasse.

Definire il valore max come suggerito da Mehasse non ha rimosso le linee di spunta indesiderate ma mi ha aiutato a trovare la risposta.

Per impostazione predefinita, primefaces/jqplot desidera avere 4 linee di tick sull'asse y. Pertanto, se il valore massimo è inferiore a 4, verrà eseguita una duplicazione nell'etichetta dell'asse y quando vengono arrotondati per eccesso (formatString: '%d').

Quello che fondamentalmente voglio, è l'intervallo di zecca per essere sia Max(y) \ 4 quando Max(y) > 4, o altrimenti 1:

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

per calcolare il valore y-max, sto ottenendo il valore grafico usando this.cfg.data quali è della forma [series_1,..., series_n] con series_i = [[x_1, y_1],..., [x_m, y_m]]

la funzione maxSeries assomiglia:

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

Nota che nel mio caso so che il mio caso non ha valore inferiore a 0. Questo codice dovrebbe essere aggiornato se questo non è il caso.

Answer 2

Sono stato sorpreso quando ho iniziato a utilizzare JQPlot che non seleziona etichette di assi ragionevoli fuori dalla scatola. In realtà è facile da risolvere.

Presumo che si desideri che l'asse y inizi a zero. Se ciò non è vero, dovrai modificare questo codice un po '.

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

L'idea di base è che vogliamo arrotondare fino a qualche bella, valore rotonda vicino al valore massimo nella nostra serie. In particolare, arrotondiamo il numero più vicino che ha zero in tutte le cifre tranne il più a sinistra. Quindi il massimo 882 si tradurrà in un asse y max di 1000.