在infowindow谷歌地圖api(v3)中無法顯示與標記相同的數據

[英]can't display data same with marker in infowindow google maps api (v3)


I want to display amcharts in the infowindow google maps, But my charts can't looping data in infowindow. If i click marker 1 data ratio can't show and click marker 2 data ratio marker 1 can show, but marker 2 can't show.

我想在infowindow谷歌地圖中顯示amcharts,但我的圖表無法在infowindow中循環數據。如果我單擊標記1數據比例無法顯示並單擊標記2數據比率標記1可以顯示,但標記2無法顯示。

Codepen.ioMy Code

Codepen.io我的代碼

How to display data infowindow same with marker.

如何顯示與標記相同的數據信息。

1 个解决方案

#1


0  

AmChart's makeChart method requires that the ID specified in the first parameter exists in the DOM or else it won't work. You're calling initAmCharts before the info window is even attached to the DOM, so you need to add a domready listener to the infowindow and call makeChart there. You also want to attach a close listener to clear out the chart instances in order to conserve resources, however you need to clone your chart data during the domready event so that clear doesn't outright delete them.

AmChart的makeChart方法要求在第一個參數中指定的ID存在於DOM中,否則它將無法工作。您在信息窗口連接到DOM之前調用initAmCharts,因此您需要將一個domready監聽器添加到infowindow並在那里調用makeChart。您還希望附加一個關閉偵聽器以清除圖表實例以節省資源,但是您需要在domready事件期間克隆圖表數據,以便clear不會直接刪除它們。

Here's the code that adds and clears the chart while preserving your data. I removed the shift calls as they seemed redundant and also broke the chart when re-opening the infowindow:

這是在保留數據的同時添加和清除圖表的代碼。我刪除了轉移呼叫,因為它們似乎是多余的,並且在重新打開信息窗時也打破了圖表:

      var chartLine;
      var chartWa;
      google.maps.event.addListener(infowindow, 'domready', function() {
        var line_data_copy = JSON.parse(JSON.stringify(item.line_data_chart));
        var wa_data_copy = JSON.parse(JSON.stringify(item.wa_data_chart));
         chartLine = initAmChart("divChartLine", colors_line, line_data_copy);
         chartWa = initAmChart("divChartWa", colors_wa, wa_data_copy);

          chartLine.allLabels[0].text = item.line_ratio+"%";
          chartLine.validateData();       

          chartWa.allLabels[0].text = item.wa_ratio+"%";
          chartWa.validateData();       
      });

      google.maps.event.addListener(infowindow, 'close', function() {
        chartLine.clear();
        chartWa.clear();
      })

Updated codepen

更新了codepen


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2017/10/11/ed6cb62710574b8f621dab495bbdcb61.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com