jQuery Flot清除選項

Question

好吧，我很確定，一旦我開始使用Flot，演示頁上的「清除選擇」按鈕工作，http://people.iola.dk/olau/flot/examples/selection.html。它對你們任何人都有用嗎？我試過在IE 7/8和Firefox中。

當試圖實現我的一個圖形相同的功能，並不能得到它的工作，才發現演示頁上不工作的例子，我只注意到這...

這裏是我的代碼：

$.post(applicationPath + "graph/" + action, 
    function (data) 
    { 
     var graphOptions = { 
      xaxis: { 
       mode: 'time', 
       timeformat: "%m/%d/%y" 
      }, 
      yaxis: { 
       tickDecimals: 0 
      }, 
      legend: { 
       show: true, 
       container: $('.legend') 
      }, 
      series: { 
       points: { show: true }, 
       lines: { show: true } 
      }, 
      grid: { 
       hoverable: true, 
       clickable: true 
      }, 
      selection: { 
       mode: "xy" 
      } 
     }; 

     // hard-code color indices to prevent them from shifting as 
     // series are turned on/off 
     var i = 0; 
     $.each(data, function (key, val) 
     { 
      val.color = i; 
      i++; 
     }); 

     var optionsContainer = $('.module.graph .options-menu'); 

     $.each(data, function (key, val) 
     { 
      optionsContainer.append('<li><input type="checkbox" name="' + key + '" checked="checked" id="id' + key + '">' + val.label + '</li>'); 
     }); 

     $('.module.graph .header .options').optionsMenu(
     { 
      sTarget: '.options-menu', 
      fnCheckboxSelected: function (index, name) 
      { 
       $.plot(data, optionsContainer, graphOptions); 
      }, 
      fnCheckboxDeselected: function (index, name) 
      { 
       $.plot(data, optionsContainer, graphOptions); 
      } 
     }); 

     var dataSet = []; 

     optionsContainer.find('input:checked').each(function() 
     { 
      var key = $(this).attr('name'); 

      if (key && data[key]) 
      { 
       dataSet.push(data[key]); 
      } 
     }); 

     var previousPoint = null; 
     var graphContainer = $('.graph #graph-container'); 

     graphContainer.bind('plothover', function (e, pos, item, ranges) 
     { 
      if (item) 
      { 
       if (previousPoint != item.datapoint) 
       { 
        previousPoint = item.datapoint; 

        $('#tooltip').remove(); 

        var xFormatted = new Date(item.datapoint[0]).toDateString(); 
        var x = item.datapoint[0].toFixed(2); 
        var y = item.datapoint[1].toFixed(2); 

        showGraphToolTip(item.pageX, item.pageY, item.series.label + " of " + y + " on " + xFormatted); 
       } 
      } 
      else 
      { 
       $('#tooltip').remove(); 
       previousPoint = null; 
      } 
     }); 

     graphContainer.bind('plotselected', function (event, ranges) 
     { 
      if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) 
      { 
       ranges.xaxis.to = ranges.xaxis.from + 0.00001; 
      } 
      if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) 
      { 
       ranges.yaxis.to = ranges.yaxis.from + 0.00001; 
      } 

      $.plot(graphContainer, dataSet, 

       $.extend(true, {}, graphOptions, 
       { 
        xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }, 
        yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to } 
       }) 
      ); 
     }); 

     var graph = $.plot(graphContainer, dataSet, graphOptions); 

     $('#clearSelection').click(function() 
     { 
      graph.clearSelection(); 
     }); 
    }, 
    "json" 
); 

我實在看不出什麼錯在我的代碼，因爲它是從實際的例子海軍報的副本和過去的，但有什麼怒視着這裏？

另外，Flot中是否有可能的錯誤？清除選擇演示是否適合您？

Answer 1

從flot.googlecode.com

• setupGrid（）

Recalculate and set axis scaling, ticks, legend etc. 

Note that because of the drawing model of the canvas, this 
function will immediately redraw (actually reinsert in the DOM) 
the labels and the legend, but not the actual tick lines because 
they're drawn on the canvas. You need to call draw() to get the 
canvas redrawn. 

如果您添加到復位功能，你應該能夠使您預期的那樣工作。