1

我正在尝试在 中绘制图形infowindow，但 flot 没有执行，也没有抛出任何错误。我在 flot 论坛上读到，人们经常在做这样的事情时遇到麻烦，因为占位符元素必须是可见的（这可能是一个红鲱鱼）。

我能够获得以下内容以在不同的元素中适当地生成图形：

$.plot(
    $("#placeholder"),
    [ f_data[loc] ],
    {
        grid: { hoverable: true, clickable: true },
        series: {
           bars: { show: true },
           clickable:true,
           color:'#3FA9F5',
           shadowSize: 0
       },//series
       xaxis: {
           tickDecimals:0,
           tickSize:1
       }//xaxis
    }
);//$.plot

但是当我将上述内容放入或引用时google.maps.event.addListener()，它什么也不做（甚至不添加<canvas>元素）。

我确保将它放在 之后infowindow.open(map,marker);，这样我就认为占位符元素是可见的。我还确保#placeholder有物质/定义的尺寸。

PS 我尝试了 Mike Williamson 报告的他对Google Maps V3 的最终解决方案：通过 AJAX 加载信息窗口内容，但这也不起作用。

编辑
在 infowindow 外部工作的 flot 示例：index2.html
在 infowindow 内部不工作的例子（addListener 'domready'）：index3.html
在 infowindow 内部不工作的例子（setTimeout）：index4.html

4

2 回答 2

2

问题是内容 div 尚未附加到域（因此 $("#placeholer") 找不到它）。在运行代码以绘制图形之前，您需要等待 infowindow domready 事件触发，如下所示：

更新：下面的代码适用于我的本地副本（我确实修改了 css，但我认为这不是必需的）。

google.maps.event.addListener(marker, 'click', (function(marker, locale, s, flot_data) {
  return function() {
    var fname = 'http://clients.frende.me/incognito/images/'+date+'_'+locale.toLowerCase().replace(/\s/g,'')+'.svg';
    infowindow.setContent('<div id="gMaps_infowindow"><h3>'+locale+' ('+hour+':00): $'+s.total+'</h3><div id="flotIW" style="height:200px; width:350px;" name="'+locale+'"></div></div>');

  google.maps.event.addListener(infowindow, 'domready', function() {(function(f_data,loc) {
    $.plot(
      $("#flotIW"),
      [ f_data[loc] ],
      {
        grid: { hoverable: true, clickable: true },
        series: {
          bars: { show: true },
          clickable:true,
          color:'#3FA9F5',
          shadowSize: 0
        },//series
      xaxis: {
        tickDecimals:0,
        tickSize:1
      }//xaxis
    }
  );//$.plot
  })(flot_data,locale)});

    infowindow.open(map, marker);
    //open_popUp(flot_data,locale);
    //open_drawGraph(locale);
  }//return
})(marker, locale, s, flot_data));//google.maps.event.addListener

（另一种选择是直接创建域节点，使用它来渲染图形，并将其传递给 setContent 调用（它将采用字符串或 DOM 节点）。

于 2012-09-30T22:28:33.800 回答
0

你试过把你$.plot的包裹起来setTimeout(function(){$.plot({stuff})}, 0)吗？

有时这有助于让浏览器有时间在执行之前完成绘制它需要的任何元素。

您可以在此处找到更多信息为什么这可能有用：为什么 setTimeout(fn, 0) 有时有用？

于 2012-09-30T21:16:24.813 回答