重绘只有最大值和最小值 - jqPlot

Question

我试图将jQuery日期选择器和jqplot插件结合起来。基本上，我用默认值加载情节，然后当按钮被击中时，我试图用新的最大值和最小值重绘绘图。

我一直在阅读the documentation，我似乎无法找到明确的答案来回答我的问题。这里是我的代码：

$(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(); 
           alert(datepickerBegin); 
           alert(datepickerEnd); 
           //redraw the plot now. 
           plot2.reInitialize({}); 
           plot2.redraw({}); 
           // 
           alert('hasd') 

           } 
          }) 

           if (datepickerBegin == "") { 
            var startingDate = lastWeekDisplay; 
           } else { 
            var startingDate = datepickerBegin; 
           } 

           if (datepickerEnd == "") { 
            var endingDate = tomorrow; 
           } else { 
            var endingDate = datepickerEnd; 
           } 

          // 



          var plot2 = $.jqplot('chart2', jsonurl,{ 
           title: "", 
           dataRenderer: ajaxDataRenderer, 
           dataRendererOptions: {unusedOptionalUrl: jsonurl}, 
           axes: { 
            xaxis: { 
             //'numberTicks' : 7, 
             min: startingDate, 
             max: endingDate, 
             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

好吧，所以答案是丑陋的，只是在click事件上完全重新创建了这个图。这是怎样的代码看起来：

$('#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({}); 

           } 
          }) 

我不能得到任何答案的工作 - 但是，如果任何人有一个意见或解决方案，请让我知道！