jqPlotresize

告诉我是否有人遇到此问题：

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

 $(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 } ); }); });  

我看到刻度标签在X轴上重复

但是当窗口resize时， createTicks函数中jqplot.dateAxisRenderer.js中的this.tickInterval对象变为null。 另外，我试图在createTicks函数中更改代码，如下所示

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

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

Answer 1

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

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

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

因为它适用于resize位，您需要使用以下内容：

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

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

---

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

我想出的唯一解决方案是自己设置滴答。 在这种情况下，您不再需要min ， max和tickInterval 。

Answer 2

对我来说，更新jqplot解决了相互碰撞的刻度标签问题，解决了tickinterval不工作的问题，请看这里接受的答案：

jqPlot DateAxis tickInterval不工作