admin管理员组文章数量:1434178
Tell me if anyone encountered this problem:
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',//pass 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>
I see that the tick labels are duplicated on the X axis
but when window are resized this.tickInterval object in the jqplot.dateAxisRenderer.js in createTicks function bee 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.
Tell me if anyone encountered this problem:
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',//pass 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>
I see that the tick labels are duplicated on the X axis
but when window are resized this.tickInterval object in the jqplot.dateAxisRenderer.js in createTicks function bee 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.
Share Improve this question asked Apr 17, 2012 at 12:19 Dmitry FisenkoDmitry Fisenko 1584 silver badges17 bronze badges2 Answers
Reset to default 2To 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();
}
});
Here is a working code sample made for your code.
EDIT:
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.
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.
For me updating jqplot solved the issue with tick labels running into each other, to address the problem of tickinterval not working see the accepted answer here:
jqPlot DateAxis tickInterval not working
本文标签： javascriptjqPlot resizingStack Overflow
版权声明：本文标题：javascript - jqPlot resizing - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745614027a2666286.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论