jsf - Primefaces 图表 + jqplot 扩展器 - y 轴上的舍入值

Question

背景

我有一个用 jqplot 选项扩展的素面折线图(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 建议的 value 没有删除不需要的刻度线，但帮助我找到了答案。

默认情况下，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 的值(value).如果不是这种情况，则应更新此代码。