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 の投稿のアイデアを使用して、なんとか問題を解決できました。

Mehasse が提案したように値を定義してmaxも、不要な目盛り線は削除されませんでしたが、答えを見つけるのに役立ちました。

デフォルトでは、primefaces/jqplot は4y 軸の目盛り線を必要とします。したがって、最大値が 未満の場合、4切り上げ時に y 軸ラベルに重複が生じます ( formatString: '%d')。

私が基本的に望んでいるのは、ティック間隔がMax(y) \ 4when 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;
    }

this.cfg.datay-max 値を計算するために、次の形式[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 軸を 0 から開始したいと仮定します。そうでない場合は、このコードを少し変更する必要があります。

// 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 に答える