移除宣傳單minicharts

我已使用Leaflet.minicharts.js插件創建了餅圖。它可以很好地添加圖表。但我不能刪除它們了。我試圖用map.removeLayer(chart[i])分別刪除每個圖表。我也嘗試將所有圖表放在一個LayerGroup中，然後使用函數map.removeLayer(LayerGroup)和layergorup.clearLayers()。當我調用函數map.hasLayer(layer)時，它返回false。所以，一切都如預期。但圖表仍然可以在地圖上看到。這裏有一個條形圖的簡單示例，我嘗試使用按鈕單擊來刪除它。移除宣傳單minicharts

<html> 
<head> 
    <title>Leaflet Test</title> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" 
    integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw==" 
    crossorigin=""/> 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" 
    integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA==" 
    crossorigin=""></script> 
    <script src="https://unpkg.com/leaflet.minichart/dist/leaflet.minichart.min.js" charset="utf-8"></script> 
</head> 
<body> 
    <!-- CSS --> 
    <style type="text/css"> 
     #mapid { height: 480px; } 
     #butt {color:black;position: absolute;padding:2em;top:50%; left:50%;} 
    </style> 

    <div id="mapid"></div> 
    <button id="butt" onclick="vanish();">Remove Chart!</button> 
    <script type="text/javascript"> 
     var map = L.map('mapid').setView([50, 9], 14); 
     var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', 
     }).addTo(map); 

     var center = [50, 9]; 
     function fakeData() {   
      return [Math.random(), Math.random(), Math.random()]; 
     }   

     var myBarChart = L.minichart(center, {data: fakeData()}); 
     map.addLayer(myBarChart); 


     function vanish(e) { 
      console.log(map.hasLayer(myBarChart)); 
      map.removeLayer(myBarChart); 
      console.log(map.hasLayer(myBarChart)); 
     } 

    </script> 

</body> 
</html>

來源

2017-07-27 Lee

我有同樣的問題。我做了什麼是我寫了一個函數，我可以循環通過圖層組，以查找圖層組是否包含具有屬性「_chart」的圖層。如果是這樣，請刪除該圖層。循環繼續，直到它刪除所有具有該屬性的圖層。這是我寫的代碼。

for(var i = 0; i<Object.keys(lyrGrp._layers).length;i++){ 

    if(lyrGrp._layers[Object.keys(lyrGrp._layers)[i]]._chart) 
     { 
     lyrGrp._layers[Object.keys(lyrGrp._layers)[i]]._chart.remove() 
     } 

}

希望它是有用的。

來源

2017-11-17 09:31:43 Loyalist1

移除宣傳單minicharts

回答

相關問題