如果有人遇到过这个问题请告诉我:
我使用 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;
但不幸的是,在调整窗口大小时,刻度标签开始相互碰撞。
最佳答案
要解决您的问题,您必须首先为日期轴(即 X 轴)设置“最小”和“最大”日期。显然,只有当设置了“min”和“max”值时,渲染器才会使用“tickInterval”的值。这类问题实际上已经在堆栈上解决了---请参阅this answer .
因此使用此建议您需要设置以下参数:
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();
}
});
Here is a working code sample made for your code.
编辑:
在摆弄示例一段时间后,我发现仍然有一些问题被认为是不可见的,因为格式覆盖了它。看起来 min
、max
和 tickInterval
的设置是不够的,因为这些值仍然不是每 3 个月一次,因为每个刻度显示第 30 天有时应该是 31。
The only solution then I figured out was to set the ticks myself.在这种情况下,您不再需要 min
、max
和 tickInterval
。
关于javascript - jqPlot调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10191122/