0

我正在编写一个简单的应用程序，其中包含传单地图、标记和标记弹出窗口上的饼图。如果我将饼图放在弹出窗口中，它会显示饼图，但是当我单击饼图切片时，它不会出现子值，当我将饼图放在一个简单的页面中时，代码可以工作。传单弹出窗口中是否有任何预定义的限制？谢谢。







var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);;
var popup = L.popup().setContent("")
var marker = L.marker([51.5, -0.09]).bindPopup(popup).addTo(mymap);
marker.setPopupContent('')

chart= new PieChart({
    "pie": {
        "innerRadius": 0
    },
    "container": "demo",
    "data": [
        {
            "url": "https:\/\/zoomcharts.com\/data\/browsers-extended.json"
        }
    ],
    "toolbar": {
        "fullscreen": true,
        "enabled": true
    },
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})
var htmltext = '<div>I am a standalone popup.</div> <hr><div id="test">loading chart</div>'
marker.on("click", onClick);
function onClick(e) {
  marker.setPopupContent(htmltext)
  var chart2 = new PieChart({
      "pie": {
          "innerRadius": 0
      },
      "container": "test",
      "data": [
          {
              "url": "https:\/\/zoomcharts.com\/data\/browsers-extended.json"
          }
      ],
      "toolbar": {
          "fullscreen": true,
          "enabled": true
      },
      "interaction": {
          "resizing": {
              "enabled": false
          }
      }
  })
}


#mapid { height: 500px; }


 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>   
<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>

<div id="demo"> Loading Pie Chart</div>
 <div id="mapid"></div>
4

1 回答 1

0

显然，是传单弹出窗口阻止了未访问弹出窗口中的甜甜圈的事件。ZoomCharts 带有 GeoChart 组件，它可以让您在地图上显示甜甜圈。看看：https ://demo.zoomcharts.com/geo-chart/examples/charts-on-charts/nominal-gdp-sector-composition.html

它还使用 Leaflet 作为基础层。

于 2020-10-20T10:00:32.223 回答