jqPlot调整大小 [英] jqPlot resizing

问题描述

告诉我是否有人遇到过这个问题：

Tell me if anyone encountered this problem:

我使用jqPlot显示在我的页面图上

I show on my page plot using 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轴上重复

I see that the tick labels are duplicated on the X axis

但是当窗口调整大小时 this.tickInterval createTicks 函数中的jqplot.dateAxisRenderer.js中的对象变为null。此外，我尝试更改函数 createTicks 看起来像这样

but when window are resized this.tickInterval object in the jqplot.dateAxisRenderer.js in createTicks function become is null. Also I tried to change code in the function createTicks looks like this

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

但不幸的是，当调整窗口大小时，刻度标签开始相互碰撞。

but unfortunately the tick labels are beginning to run into each other when the window is resized.

推荐答案

要解决您的问题，您必须先为日期轴（即X轴）设置'min'和'max'日期。显然，只有在设置'min'和'max'值时，渲染器才会使用'tickInterval'的值。这种问题实际上已经在堆栈上解决了 - 请参阅此答案。

To sort out your problem you must first set the 'min' and 'max' dates for the date axis (i.e. axis X). Apparently only when the 'min' and 'max' values are set the renderer will use the value of 'tickInterval'. That sort of problem was actually already solved on stack --- please see this answer.

因此，使用此建议您需要设置以下参数：

Therefore using this suggestion you will need to set the following parameters as below:

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

当调整大小时，您需要使用以下内容：

As it goes for the resizing bit you need to use the below:

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

这是为您的代码制作的工作代码示例。

编辑：
在摆弄样品一段时间之后，我发现还有一点点问题，认为不可见因为格式覆盖了它。因为它看起来设置 min ， max 和 tickInterval 是不够的，因为价值仍然不是每3个月，因为每个刻度显示第30天，它有时应该是31。

After fiddling with the sample for a while I observed that there was still a little bit of a problem thought not visible cause the format was covering it. As it appears the setting of min, max and tickInterval is not enough as the values are still not every 3 months as each tick shows 30th day and it should sometimes be 31.

我想出的唯一解决办法就是自己设置滴答声。在这种情况下你不需要 min ， max 和 tickInterval 了。

The only solution then I figured out was to set the ticks myself. In this case you do not need min, max and tickInterval any more.

这篇关于jqPlot调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！