javascript - 谷歌地图 API v3 信息窗口 + 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
flot 在信息窗口内不工作的示例(addListener 'domready'):index3.html
flot 在信息窗口(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 节点)。