2014-10-16 27 views
0

我遇到了一个奇怪的问题与JQuery Flot。Javascript硬编码对象作为参数工作,但没有引用全局对象

我跑了

var plot = null; 

function initPlot() { 
    plot = $.plot("#graph", myData, { /* my options here */ }); 
} 

,一切工作正常。

我感动我的选择数据为变量的函数

var plot = null; 

function initPlot() { 
    var myOptions = { /* my options here */ }; 
    plot = $.plot("#graph", myData, myOptions); 
} 

又一遍,一切正常的范围之内。

然后我把变量移到一个更宽的范围(所以我可以在其他函数中引用它)。

var plot = null; 
var myOptions = { /* my options here */ }; 

function initPlot() { 
    plot = $.plot("#graph", myData, myOptions); 
} 

突然它不会正确绘图。更令我困惑的是,它获得了大部分选项的价值 - 图形显示,而不是数据。

使用Chrome的调试器,我可以看到myOptions在我拨打$.plot()时有正确的值。我也尝试设置一个局部变量o = myOptions,并调用$.plot()o而不是myOptions,但这也无法绘制数据。

这是什么原因造成的?我该如何解决?

我应该注意到我正在使用Flot.Grow和Flot.Stack,但禁用这些并不会改变结果。

EDIT(再次)

%的意见,这里简直是我的代码的状态:

<body> 
    <div id="graph" style="width: 100%; height: 800px;"></div> 
    <script> 
     var idMap = {}; 
     var yesData = []; 
     var noData = []; 
     var incData = []; 
     var voteData = [{ label: "Yes votes", data: yesData }, 
         { label: "No votes", data: noData }, 
         { label: "Not met quorum", data: incData }]; 
     var ticks = []; 
     var plot = null; 

     var myOptions = { 
      series: { 
       //stack: true, 
       lines: { 
        show: false, 
        fill: true, 
        steps: false, 
       }, 
       bars: { 
        show: true, 
        barWidth: .8, 
        horizontal: true, 
       }, 
       //grow: { 
       // active: false, 
       // steps: 20, 
       // stepDirection: "up", 
       // stepMode: "linear", 
       // valueIndex: 0, 
       // growings: [{ 
       //  valueIndex: 0, 
       // }] 
       //}, 
      }, 
      yaxis: { 
       min: -.2, 
       max: 10, //dictLen(idMap), 
       //ticks: , 
       //tickLength: 0, 
      }, 
      xaxis: { 
       min: 0, 
       max: 200, 
      }, 
      grid: { 
       hoverable: true, 
      }, 
     }; 

     function dictLen(obj) { 
      var size = 0, key; 
      for (key in obj) { 
       if (obj.hasOwnProperty(key)) size++; 
      } 
      return size; 
     }; 

     function setDataPoint(val) { 
      var total = val.r["yes"] + val.r["no"]; 
      if (total < val.q) { 
       incData.push([total, idMap[val.id]]); 
      } 
      else { 
       yesData.push([val.r["yes"], idMap[val.id]]); 
       noData.push([val.r["no"], idMap[val.id]]); 
      } 
     } 

     function initData() { 
      $.getJSON('/Vote/results', function (data) { 
       $.each(data, function (key, val) { 
        idMap[val.id] = key; 
        ticks.push([key + .4, val.nm]); 
        setDataPoint(val); 
       }); 

       initPlot(); 
      }); 
     } 

     function initPlot() { 
      plot = $.plot("#graph", voteData, myOptions); 
     } 

     $(document).ready(function() { 
      initData(); 
     }); 
    </script> 
</body> 
+0

'myData'初始化在哪里? – laruiss 2014-10-16 16:43:36

+1

这可能是Flot在内部直接保存对该对象的引用。也许试试看'$ .plot(“#graph”,data,$ .extend({},myOptions))' – Pointy 2014-10-16 16:47:28

+0

@laruiss在myOptions之前。 – dfoverdx 2014-10-16 16:53:45

回答

1

原来我有点白痴。

问题是我在计算myOptions.yaxis.max之前idMap被填充。然后,当我在这里等待答案的时候,我在数据库端进行了一些重构,这导致了一个空数据集。

当我修复db并将myOptions设置为仅静态值时,它工作正常。