Javascript 单击后的传单多边形显示图表
我是新的传单,我有一个地图上,我导入了几个多边形。 我的多边形数据存储在.js文件中。Javascript 单击后的传单多边形显示图表,javascript,d3.js,leaflet,chart.js,data-visualization,Javascript,D3.js,Leaflet,Chart.js,Data Visualization,我是新的传单,我有一个地图上,我导入了几个多边形。 我的多边形数据存储在.js文件中。 现在,我希望在单击多边形时显示简单图表。 我的想法是使用多边形轮廓数据或单独文件中的数据(文本和数字)。 我想在传单地图之外显示图表。它们始终是相同的图表,只有当您单击不同的多边形时,数据才会更改。 我发现我可以使用D3.js或Chart.js制作图表。 我的问题是将单击地图的多边形与正确图形的显示链接起来 编辑: 这是我目前使用的代码 <script type="text/javascrip
现在,我希望在单击多边形时显示简单图表。
我的想法是使用多边形轮廓数据或单独文件中的数据(文本和数字)。
我想在传单地图之外显示图表。它们始终是相同的图表,只有当您单击不同的多边形时,数据才会更改。
我发现我可以使用D3.js或Chart.js制作图表。
我的问题是将单击地图的多边形与正确图形的显示链接起来 编辑: 这是我目前使用的代码
<script type="text/javascript" src="file.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([39.0, -98.26], 10);
var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href= »http://osm.org/copyright »>OpenStreetMap</a> contributors',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'black',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)
};
}
var country = L.geoJson(data, {
style: style,
}).addTo(map);
var small= L.geoJson(data2, {
style: style,
}).addTo(map);
var baseMaps = {
"OSM": osmLayer
};
var overlayMaps = {
"Country": country,
"Small": small
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
</script>
我做了很多研究,但不确定是否有可能或者如何基于单击的多边形显示图表(不是弹出窗口中的图表)。我需要帮助知道该找什么
感谢您的帮助您可能想使用
没有代码=没有帮助。编辑第一篇文章,我不知道这是否是你想要的
var data={"type":"FeatureCollection","features":[
{"type":"Feature","properties":{"Zip":"92662","Name":"Paris","density":500},"geometry":{"type":"MultiPolygon","coordinates":xxx ,
]};
function countryFunc(feature, layer){
layer.on('click', function(){
// console.log(feature);
/* get your chart now */
});
}
const country = L.geoJson(data, {style: style, onEachFeature:countryFunc}).addTo(map);