谷歌地图api v3 infowindow + flot [英] google maps api v3 infowindow + flot

问题描述

我正在尝试在infowindow中绘制图形，但是flot没有执行-并且没有引发任何错误.我在flot论坛上读到，经常有人在做这样的事情时遇到麻烦，因为占位符元素必须可见(在这里可能是红色的提示).

I'm trying to draw a graph inside an infowindow, but flot is not executing—and is not throwing any errors. I read in the flot forum that often people have trouble with doing something like this because the placeholder element must be visible (that might be a red-herring here tho).

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

I'm able to get the following to produce the graph appropriately in a different element:

$.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>元素).

But when I put the above into, or referenced from, the google.maps.event.addListener(), it does nothing (not even add the <canvas> elements).

我确保将其放在infowindow.open(map,marker);之后，以便使我认为占位符元素可见.我还确保#placeholder具有实体/定义的尺寸.

I made sure to put it after infowindow.open(map,marker);, so that makes me think the placeholder element is visible. I also made sure #placeholder has substance/defined dimensions.

P.S.我尝试了Mike Williamson报告的最终解决方案，该解决方案是 Google Maps V3:通过AJAX加载信息窗口内容，但是没有用要么.

P.S. I tried what Mike Williamson reported as his eventual solution to Google Maps V3: Loading infowindow content via AJAX, but that didn't work either.

编辑
在信息窗口外进行浮动处理的示例: index2.html
flot无法在信息窗口(addListener'domready')内部运行的示例: index3.html
flot无法在信息窗口(setTimeout)内运行的示例: index4.html

EDIT
Example of flot working outside of infowindow: index2.html
Example of flot not working inside of infowindow (addListener 'domready'): index3.html
Example of flot not working inside of infowindow (setTimeout): index4.html

推荐答案

问题是内容div尚未附加到域(因此$(#placeholer")找不到它).您需要先等待infowindow domready事件触发，然后再运行代码以绘制图形，如下所示:

The issue is that the content div has not been attached to the domain yet (so $("#placeholer") can't find it). You need to wait for the infowindow domready event to fire before running your code to plot the graph, something like this:

更新:以下代码在本地副本上对我有用(我确实修改了CSS，但我认为这不是必需的.)

UPDATE: The code below works for me on a local copy (I did modify the css, but I don't think that was required).

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节点).

(another option is to create the domain node directly, use that to render your graph, and pass that into the setContent call (which will take either a string or a DOM node).

这篇关于谷歌地图api v3 infowindow + flot的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！