2013-07-01 89 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 
       } 
      }}); 
     }