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