Primefaces图表+ jqplot扩展程序 - y轴中的圆整值

Question

背景

我有一个PrimeFaces的折线图（以日期为x轴，y轴上的整数大于等于0），使用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;
    }

我正在使用jqplot扩展程序，在x轴上拥有自定义日期间隔，这很好用：

问题：

当我在y轴上使用min: 0选项时，数字的格式化变得非常奇怪，特别是当存在小值时：

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

为了解决这个问题，我使用formatString:%d。它有效，但会对刻度数量产生问题：

正如您在截图上看到的，有几次出现了值为1的线。

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

我无法确定静态刻度数，因为当数据增长时(比如说大约100)，我确实希望在y轴上有几个值(比如20,40等)。

- phoenix7360

Answer 1

我参考了Mehasse的帖子，成功解决了我的问题。

按照Mehasse的建议定义max值并不能去除不需要的刻度线，但是有助于我找到答案。

默认情况下，primefaces/jqplot希望在y轴上有4个刻度线。因此，如果最大值小于4，当它们被四舍五入时（formatString: '%d'），会出现y轴标签重复的情况。

基本上，我想要的是刻度间隔为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。如果不是这种情况，请更新此代码。

- phoenix7360

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。

- Mark E. Haase

---

谢谢！虽然它没有解决我的问题，但是它给了我一个很好的解决思路。我会发布一个答案来解释我是如何解决它的。 - phoenix7360