我正在使用 jqPlot 来显示我们一个项目的燃尽图。所以它的 x 轴上有日期。是否可以根据缩放级别在 x 轴刻度上打勾?那么放大越大,它就会显示年/季度/月/周/天?
我当前的 jqPlot 设置:
burndownChart = $.jqplot('burndownChart', seriesData, {
legend: {
show: true,
location: 'ne',
renderer: $.jqplot.EnhancedLegendRenderer
},
seriesDefaults: {
markerOptions: {
show: false
}
},
series: seriesLabels,
cursor: {
show: true,
zoom: true,
showTooltip: false
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
rendererOptions:{
tickRenderer:$.jqplot.CanvasAxisTickRenderer
},
tickOptions: {
formatString: '%d-%b-%Y',
angle: -45
},
min: projectStartDate
},
yaxis: {
min: 0
}
},
grid: {
background: '#ffffff'
},
canvasOverlay: {
show: true,
objects: [
{dashedVerticalLine: {
name: "Today",
x: today,
lineWidth: 2,
yOffset: "0px",
ymaxOffset:"0px",
color: "rgb(66, 98, 144)",
shadow: false,
dashPattern:[2,8]
}}
]
}
});
最佳答案
我们提出了一个可接受的解决方案,即通过使用不同的 x 轴选项重新绘制图表来创建多个预定义的“缩放级别”,如下所示:
function replotBurnDownChart(startDate, endDate, type)
{
switch(type)
{
case 'week':
dateFormat = '%A';
numberTicks = 7;
break;
case 'month':
dateFormat = '%d-%b';
numberTicks = 31;
break;
case 'quarter':
dateFormat = '%b-%Y';
numberTicks = 3;
break;
case 'year':
dateFormat = '%b-%Y';
numberTicks = 12;
break;
default:
dateFormat = '%d-%b-%Y';
numberTicks = null;
break;
}
if(endDate <= 0 || typeof endDate == 'undefined' || !endDate)
{
endDate = null;
}
burndownChart.replot({ axes: {
xaxis: {
min: startDate,
max: endDate,
tickOptions: {
formatString: dateFormat,
angle: -45
},
numberTicks: numberTicks
}
}});
}
关于jquery - jqPlot 缩放比例日期轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17399403/