3

誰かがこの問題に遭遇したか教えてください:

jqPlotを使用してページプロットに表示します

<script language="javascript" type="text/javascript">

    $(document).ready(function () {
            $.jqplot.config.enablePlugins = true;
            var chLines = [[['09/30/2010 00:00:00',24.13],['12/31/2010 00:00:00',28.26],['03/31/2011 00:00:00',24.00],['06/30/2011 00:00:00',25.35],['09/30/2011 00:00:00',26.26],['12/31/2011 00:00:00',29.71]]];
            var chSeries = [{       color: '#436277',       label: 'label'  }];
        var mnth;
        var quarter;

        $.jqplot.DateTickFormatter = function(format, val) {
            if (!format) {
                format = '%Y/%m/%d';
            }       

            if(format == '%Q') {
                mnth = $.jsDate.strftime(val, '%#m');
                quarter = parseInt((mnth-1) / 3) + 1;
                return $.jsDate.strftime(val, '%Y') + 'Q' + quarter;
            }
            return $.jsDate.strftime(val, format);
        };

        //$.jqplot.DateAxisRenderer.tickInterval = 86400000*32*3;

        var plot = $.jqplot('content-chart', chLines,
            {
                //animate: !$.jqplot.use_excanvas, // Only animate if we're not using excanvas (not in IE 7 or IE 8)..           
                axes: {
                    xaxis: {
                        tickInterval: 86400000*32*3,
                        renderer: $.jqplot.DateAxisRenderer,
                        borderColor: 'black',
                        borderWidth: 0.5,
                        tickOptions: {
                            showGridline: false,
                            //formatString: '%b %Y',
                            formatString: '%Q',
                            textColor: 'black',
                            fontSize: '11px',
                        }
                    },
                    yaxis: {
                        min: 0,
                        tickOptions: {
                            formatString: '%.2f',
                            textColor: 'black',
                            fontSize: '11px'
                        }
                    }
                },
                highlighter: {
                    show: true,
                    sizeAdjust: 7.5
                },
                seriesDefaults: {
                    lineWidth: 3
                },

                series: chSeries,
                legend: {
                    show: true,
                    location: 'sw',//compass direction, nw, n, ne, e, se, s, sw, w.
                    xoffset: 5,
                    yoffset: 5
                    //placement: 'outside'
                },

                grid:{
                    background: 'white',
                    borderColor: 'white',
                    shadow: false,
                    gridLineColor: '#999999'
                }
            });
            $(window).bind('resize', function(event, ui) {              
                plot.replot( { resetAxes: true } );
            });
    });
</script>

X 軸の目盛りラベルが重複していることがわかりますここに画像の説明を入力

ただし、ウィンドウのサイズが変更されると、 createTicks関数の jqplot.dateAxisRenderer.js のthis.tickIntervalオブジェクトが null になります。また、関数createTicksのコードを次のように変更しようとしました

this.tickInterval = 86400000 * 32 * 3;
var tickInterval = this.tickInterval;

残念ながら、ウィンドウのサイズを変更すると、目盛りラベルが互いにぶつかり始めています。

4

2 に答える 2

2

問題を解決するには、最初に日付軸 (軸 X) の「最小」と「最大」の日付を設定する必要があります。どうやら「min」と「max」の値が設定されている場合にのみ、レンダラーは「tickInterval」の値を使用します。その種の問題は、実際にはスタック上ですでに解決されています ---この回答を参照してください。

したがって、この提案を使用して、次のパラメータを次のように設定する必要があります。

tickInterval: "3 months",   
min: chLines[0][0][0],
max: chLines[0][0][chLines[0].length-1]

サイズ変更ビットについては、以下を使用する必要があります。

$(window).bind('resize', function(event, ui) {    
    if (plot) {
        plot.replot();
    }
});

これは、コード用に作成された実際のコード サンプルです。

編集： しばらくサンプルをいじった後、フォーマットがそれを覆っていたために目に見えないと思われる問題がまだ少しあることに気付きました。各目盛りが 30 日目を示し、時には 31 になる必要があるため、値はまだ 3 か月ごとではないため、 の設定が表示され、十分ではありminませんmax。tickInterval

そのとき私が見つけた唯一の解決策は、自分で目盛りを設定することでした。この場合、 は必要ありminませmaxんtickInterval。

于 2012-04-19T17:02:38.787 に答える
0

jqplot を更新すると、目盛りラベルが互いに衝突する問題が解決しました。 tickinterval が機能しないという問題に対処するには、ここで受け入れられた回答を参照してください。

jqPlot DateAxis tickIntervalが機能しない

于 2013-05-01T11:33:02.613 に答える