Question

我已经使用Leaflet.js通过循环创建了多个标记数组，还使用ApexCharts.js创建了图表。尽管我使用循环生成图表的不同数据，但是在弹出窗口中看不到图表。如果我在代码中更改ID中的“ i和1”，自然可以看到图表，并且弹出窗口中的所有图表都与您看到的相同。

我想在每个标记中包含不同数据的图表。我该怎么办？

我的整个草稿如下：

    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: '&copy; ' + 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/

预先感谢您的帮助。

如何使用传单库在多个标记的弹出窗口中添加具有不同值的图表？

0 个答案: