Я создал несколько массивов маркеров через цикл, используя Leaflet.js, а также я создал диаграммы с использованием ApexCharts.js. Хотя я генерирую разные данные диаграмм с помощью цикла, я не вижу диаграммы во всплывающих окнах. Если я изменю «i и 1» в id в моих кодах, естественно, я вижу диаграммы, и все диаграммы во всплывающих окнах такие же, как вы видите.
Я хочу графики, которые имеют разные данные в каждом маркере. Как я могу это сделать?
Весь мой черновик приведен ниже:
enter code<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<style>
#map {
height: 500px;
}
div[id*="chart"] {
width: 320px;
height: 150px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([-41.3058, 174.82082], 8);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var points = [
[-40.99497,174.50808],
[-41.30269,173.63696],
[-41.51285,173.53274]
];
marker_popup = [] ;
for (var i = 0; i < points.length; i++) {
marker = new L.marker([points[i][0],points[i][1]]).addTo(map);
marker_popup.push(marker) ;
marker_popup[i].bindPopup('<div id="chart'+i+'"></div>')
.on('popupopen', function (popup) {
var options = {
chart: {
type: 'bar'
},
series: [{
name: 'sales',
data: [(30*i),40,45,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
var chart = new ApexCharts(document.getElementById("chart"+i), options);
chart.render();
});
}
</script>
</body>
</html>
https://jsfiddle.net/jy1n7grL/3/
Заранее спасибо за помощь.