jquery - jqPlot 缩放比例日期轴

Question

我正在使用 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]
                        }}
                    ]
                }
            });

Answer 1

我们提出了一个可接受的解决方案，即通过使用不同的 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
                }
            }});
        }