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

jqPlot缩放日期轴变焦

1 个答案: