谷歌地图 api v3 infowindow + flot

Question

我正在尝试在 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 具有实质/定义的尺寸。

附：我尝试了 Mike Williamson 报告的他对Google Maps V3: Loading infowindow content via AJAX 的最终解决方案，但这也不起作用。

编辑
在 infowindow 之外工作的 flot 示例：index2.html
在 infowindow (addListener 'domready') 内不工作的 flot 示例：index3.html
flot 在 infowindow (setTimeout) 内不起作用的示例：index4.html

Answer 1

问题是内容 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 节点）。

Answer 2

您是否尝试过将您的 $.plot 包装在 setTimeout(function(){$.plot({stuff})}, 0) 中？

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

您可以在此处找到更多信息为什么这可能有用：Why is setTimeout(fn, 0) sometimes useful?