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. 

如果您添加到复位功能，你应该能够使您预期的那样工作。