7

背景

我有一个使用 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时，数字的格式会变得非常时髦，尤其是当值较小时：

分数数

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

为了解决这个问题，我使用formatString: %d. 它可以工作，但会产生刻度数问题：

在此处输入图像描述

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

问题

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

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

4

2 回答 2

6

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

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

默认情况下，primefaces/jqplot 希望有4y 轴刻度线。因此，如果最大值低于，则在向上取整（ ）4时，y 轴标签中将出现重复。formatString: '%d'

我基本上想要的是刻度间隔是Max(y) \ 4whenMax(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。如果不是这种情况，则应更新此代码。

于 2013-03-28T11:57:36.023 回答
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。

于 2013-03-27T15:42:28.367 回答