JQPlot увеличение диаграммы и использование функции replot

Question

Я использую jqplot, чтобы нарисовать диаграммы на моем сайте. Я хотел бы дать пользователю возможность увеличить диаграммы, вставив Trigger link внизу диаграмму. Эта ссылка предназначена для отображения всплывающего окна с увеличенным графиком.

Я обнаружил, что показанная диаграмма в div, которая была скрыта, требует вызова функции replot() на конкретном участке.

Пример кода я работаю с размещена здесь: http://jsfiddle.net/Mithrand1r/JWhmQ/2496/

Честно говоря, я не совсем уверен, где plot2.replot() следует.

Может ли кто-нибудь помочь мне с этим?

Answer 1

Вот ответ на ваш вопрос: JsFiddle Link

$(document).ready(function(){ 
     $.jqplot.config.enablePlugins = true; 
     var chartData = [["19-Jan-2012", 2.61], ["20-Jan-2012", 5.00], ["21-Jan-2012", 6.00]]; 

     // add a custom tick formatter, so that you don't have to include the entire date renderer library. 
     $.jqplot.DateTickFormatter = function(format, val) { 
      // for some reason, format isn't being passed through properly, so just going to hard code for purpose of this jsfiddle 
      val = (new Date(val)).getTime(); 
      format = '%b&nbsp%#d' 
      return $.jsDate.strftime(val, format); 
     }; 

     function PlotChart(chartData, extraDays, elem) { 

      var plot2 = $.jqplot(elem, [chartData], { 
       title: 'Mouse Cursor Tracking', 
       seriesDefaults: { 
        renderer: $.jqplot.BarRenderer, 
        rendererOptions: { 
         barPadding: 1, 
         barWidth: 50 
        }, 
        pointLabels: { 
         show: true 
        } 
       }, 
       axes: { 
        xaxis: { 
         pad: 1, 
         // a factor multiplied by the data range on the axis to give the    
         renderer: $.jqplot.CategoryAxisRenderer, 
         // renderer to use to draw the axis,  
         tickOptions: { 
          formatString: '%b %#d', 
          formatter: $.jqplot.DateTickFormatter 
         } 
        }, 
        yaxis: { 
         tickOptions: { 
          formatString: '$%.2f' 
         } 
        } 
       }, 
       highlighter: { 
        sizeAdjust: 7.5 
       }, 
       cursor: { 
        show: true 
       } 
      }); 
     } 

     PlotChart(chartData, 3, "chart1"); 

     jQuery(function($) { 

      $("a.topopup").click(function() { 
        loading(); // loading 
        setTimeout(function(){ // then show popup, deley in .5 second 
         loadPopup(); // function show popup 
        }, 500); // .5 second 

      return false; 
      }); 

      /* event for close the popup */ 
      $("div.close").hover(
          function() { 
           $('span.ecs_tooltip').show(); 
          }, 
          function() { 
           $('span.ecs_tooltip').hide(); 
          } 
         ); 

      $("div.close").click(function() { 
       disablePopup(); // function close pop up 
      }); 

      $(this).keyup(function(event) { 
       if (event.which == 27) { // 27 is 'Ecs' in the keyboard 
        disablePopup(); // function close pop up 
       } 
      }); 

       $("div#backgroundPopup").click(function() { 
       disablePopup(); // function close pop up 
      }); 

      $('a.livebox').click(function() { 
       alert('Hello World!'); 
      return false; 
      }); 

      /************** start: functions. **************/ 
      function loading() { 
       $("div.loader").show(); 
      } 
      function closeloading() { 
       $("div.loader").fadeOut('normal'); 
      } 

      var popupStatus = 0; // set value 

      function loadPopup() { 
       if(popupStatus == 0) { // if value is 0, show popup 
        closeloading(); // fadeout loading 
        $("#toPopup").fadeIn(0500); // fadein popup div 
        $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8 
        $("#backgroundPopup").fadeIn(0001); 
        PlotChart(chartData, 3, "chart2"); 
        popupStatus = 1; // and set value to 1 
       } 
      } 

      function disablePopup() { 
       if(popupStatus == 1) { // if value is 1, close popup 
        $("#toPopup").fadeOut("normal"); 
        $("#backgroundPopup").fadeOut("normal"); 
        popupStatus = 0; // and set value to 0 
        $('#chart2').empty(); 
       } 
      } 
      /************** end: functions. **************/ 
     }); // jQuery End 

});