2013-07-01 54 views
2

我正在使用jqPlot为我们的项目之一显示燃尽图。所以它的日期是x轴。根据缩放级别是否可以在x轴上标记刻度?所以它显示你放大得越多,几年/季度/月/周/日?jqPlot缩放比例日期轴

我目前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] 
         }} 
        ] 
       } 
      }); 

回答

2

我们已经与可接受的解决方案上来,这是通过型重构,象这样不同的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 
       } 
      }}); 
     }