jqPlot X軸渲染

Question

我已經將jquery datepicker小部件與jqplot結合在一起，並且在發生更改時使用datepicker的值重新創建繪圖。

但是，在大日期範圍內，x軸上的標籤一起運行看起來非常難看。

這裏經常這樣：

這裏用一個大範圍的這樣：

我的問題是 - 是否有可能更改軸的呈現，因此，如果有一個大的範圍不是每一個日期都顯示？也許2或3，但總是包括開始日期和結束日期。

這是我的代碼 - 請讓我知道，如果你可以幫助！

$(document).ready(function(){ 



          var ajaxDataRenderer = function(url, plot, options) { 
           var ret = null; 
           $.ajax({ 
            async: false, 
            url: url, 
            type: "GET", 
            dataType:"json", 
            data: {metricName: ""}, 
            success: function(data) { 
             ret = data; 
            }, 
            error:function (xhr, ajaxOptions, thrownError){ 
             alert(xhr.responseText); 
            }  
           }); 
           return ret; 
          }; 

          //var jsonurl = "reports/reportData.json"; 
          var jsonurl = "tenant/metrics/get.json"; 

          var currentTime = new Date() 
          var month = currentTime.getMonth() + 1; 
          var day = currentTime.getDate(); 
          var year = currentTime.getFullYear(); 
          var today = month + "-" + day + "-" + year; 

          var currentDatePlus = new Date(new Date().getTime() + 24 * 60 * 60 * 1000); 
          var dayPlus = currentDatePlus.getDate() 
          var monthPlus = currentDatePlus.getMonth() + 1 
          var yearPlus = currentDatePlus.getFullYear() 
          var tomorrow = monthPlus + "/" + dayPlus + "/" + yearPlus; 


          function getLastWeek(){ 
           var today = new Date(); 
           var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7); 
           return lastWeek ; 
          } 

          var lastWeek = getLastWeek(); 
          var lastWeekMonth = lastWeek.getMonth() + 1; 
          var lastWeekDay = lastWeek.getDate(); 
          var lastWeekYear = lastWeek.getFullYear(); 

          var lastWeekDisplay = lastWeekMonth + "/" + lastWeekDay + "/" + lastWeekYear; 

          var datepickerBegin = $("#datepicker_start").val(); 
          var datepickerEnd = $("#datepicker_to").val(); 

          $('#applyBtn').click(function() { 
           // Check to make sure the datepicker isn't empty 
          if ($("#datepicker_start").val() !== "" && $("#datepicker_to").val() !== "") { 

           var datepickerBegin = $("#datepicker_start").val(); 
           var datepickerEnd = $("#datepicker_to").val(); 

             //Recreate the plot 
             var plot2 = $.jqplot('chart2', jsonurl,{ 
             title: "", 
             dataRenderer: ajaxDataRenderer, 
             dataRendererOptions: {unusedOptionalUrl: jsonurl}, 
             axes: { 
              xaxis: { 
               //'numberTicks' : 7, 
               min: datepickerBegin, 
               max: datepickerEnd, 
               renderer:$.jqplot.DateAxisRenderer, 
               rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer}, 
               tickInterval: '1 day', 
               tickOptions:{formatString:'%#m/%#d/%Y' 

               } 
               //rendererOptions: {sdaTickInterval: [1, 'month']} 

              }, 
              yaxis: { 
               label: "MB", 
               tickOptions:{formatString:'%d '}, 
               // Comment the next line out to allow negative values (and therefore rounded ones) 
               min: 0 
              } 

             }, 
             highlighter: { 
              show: true, 
              sizeAdjust: 7.5 
             } 
            }); 
           //redraw the plot now. 
           //plot2.reInitialize({}); 
           plot2.replot({}); 

           } 
          }) 


          // The default plot 

          var plot2 = $.jqplot('chart2', jsonurl,{ 
           title: "", 
           dataRenderer: ajaxDataRenderer, 
           dataRendererOptions: {unusedOptionalUrl: jsonurl}, 
           axes: { 
            xaxis: { 
             //'numberTicks' : 7, 
             min: lastWeekDisplay, 
             max: tomorrow, 
             renderer:$.jqplot.DateAxisRenderer, 
             rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer}, 
             tickInterval: '1 day', 
             tickOptions:{formatString:'%#m/%#d/%Y' 
             } 
             //rendererOptions: {sdaTickInterval: [1, 'month']} 

            }, 
            yaxis: { 
             label: "MB", 
             tickOptions:{formatString:'%d '}, 
             // Comment the next line out to allow negative values (and therefore rounded ones) 
             min: 0 
            } 

           }, 
           highlighter: { 
            show: true, 
            sizeAdjust: 7.5 
           } 
          }); 


         }); 

Answer 1

好的 - 我對這個問題有了更好的把握。

我已經使用'numberTicks'屬性限制了訂單號，所以如果日期範圍超過特定值，它就有一定的數字。

唯一剩下的問題是，隨着numberTicks，交叉點不總是正確的（意味着在x軸10/05/12，該值不總是放在那裏當numberTicks是有限的。