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

Question

背景

我有一个使用 jqplot 选项扩展的 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 轴上自定义日期间隔，这工作正常：

问题

当我在 y 轴上使用选项 min: 0 时，数字的格式会变得非常时髦，尤其是当值较小时：

请注意，primefaces 中的minY 属性不起作用（可能是因为扩展程序覆盖了它）

为了解决这个问题，我使用formatString: %d。它可以工作，但会产生滴答数的问题：

正如您在屏幕截图中看到的，值 1 有好几行。

问题

如何确保我不会在 y 轴上获得多次相同的值？

我真的不能有一个静态的刻度数，因为当数据变大时（比如 100 左右），我确实想要 y 轴上的多个值（例如 20、40 等...）

Answer 1

当我第一次开始使用 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。

Answer 2

我设法利用 Mehasse 帖子中的想法解决了我的问题。

像 Mehasse 建议的那样定义 max 值并没有删除不需要的刻度线，但帮助我找到了答案。

默认情况下，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 最大值，我使用 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 的值。如果不是这种情况，则应更新此代码。