Primefaces圖表+ jqplot擴展器 - 在擴展與jqplot選項y軸

Question

背景

我有一個primefaces曲線圖（x上日期，整數> = Y上0）舍入值：

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

我使用jqplot擴展到對x軸的自定義日期間隔，這是工作的罰款：

問題

當我使用該選項min: 0在y軸號的格式過得真時髦，尤其是當有小的值：

注意，minY屬性在primefaces不工作（可能是因爲擴展其覆蓋）

爲了解決這個問題，我使用formatString: %d。它的工作原理，但它與蜱的數量產生的問題：

正如你在截圖中看到，有幾個時間值1

問題

行如何確保我在y軸上不會獲得相同的數值？

我真的不能有一個靜態數量的刻度，因爲當數據變大（比方說大約100）時，我確實需要y軸上的幾個值（例如20,40等...）

Answer 1

我設法用的想法從Mehasse的崗位來解決我的問題。

定義max值由類似建議Mehasse沒有刪除不需要的刻度線，但幫我找到了答案。

默認情況下，primefaces/jqplot希望有4 y軸刻度線。因此，如果最大值低於4，則四捨五入時會在y軸標籤中出現重複（formatString: '%d'）。

我基本上要什麼，是週期的時間間隔是要麼Max(y) \ 4時Max(y) > 4，或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; 
    } 

要計算在y-max值，我得到使用this.cfg.data情節值是形式[series_1,..., series_n]與series_i = [[x_1, y_1],..., [x_m, y_m]]

的maxSeries功能看起來像：

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

請注意，在我的情況下，我知道我的情況下，我沒有低於0的價值。如果不是這種情況，應該更新此代碼。

Answer 2

我很驚訝，當我使用JQPlot，它不挑合理的軸標籤開箱第一次開始。這實際上很容易修復。

我會假設你希望你的Y軸從零開始。如果不是這樣，你需要稍微修改一下這段代碼。

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

這裏的基本想法是，我們要達到到舍入到一些不錯的，一輪價值近在我們的系列中的最大值。特別是，我們將四捨五入到除最左邊以外的所有數字都爲零的最近數字。因此，最大882將導致y軸最大值的1000