Leaflet JS中条形图的控制层

Question

这是我的第一个网络地图。为了可视化我的数据之一，我正在使用传单迷你图。我成功地展示了条形图。现在我试着为我的条形图制作一个控制层。但它说 Uncaught ReferenceError: barChartMarker is not defined。如何解决这个问题？这是我的代码：

forEach(bar => {
            var options = {
                data: [
                    bar.ASKES / 3,
                    bar.BPJS / 3,
                    bar.KIS / 3
                ],
                chartOptions: {
                    'dataPoint1': {
                        fillColor: '#FEE5D9',
                        minValue: 0,
                        maxValue: 30,
                        maxHeight: 30,
                        displayText: function (value) {
                            return value.toFixed(2);
                        }
                    },
                    'dataPoint2': {
                        fillColor: '#FCAE91',
                        minValue: 0,
                        maxValue: 30,
                        maxHeight: 30,
                        displayText: function (value) {
                            return value.toFixed(2);
                        }
                    },
                    'dataPoint3': {
                        fillColor: '#FB6A4A',
                        minValue: 0,
                        maxValue: 30,
                        maxHeight: 30,
                        displayText: function (value) {
                            return value.toFixed(2);
                        }
                    }
                    }
                },
             
              
                weight: 1,
                color: '#000000',
                }
                     
                var barChartMarker = L.minichart(bar.location, options);
                map.addLayer(barChartMarker);
            
                })

    var overlays = {
            "Barchart": barChartMarker
        };
    
        L.control.layers(overlays).addTo(map);

Answer 1

您不能从外部访问在函数内部定义的变量。

更改为：

var barChartGroup = L.featureGroup().addTo(map);
var overlays = {
   "BarChart" : barChartGroup
};

forEach(bar => {
    var options = {
        data: [
            bar.ASKES / 3,
            bar.BPJS / 3,
            bar.KIS / 3
        ],
        chartOptions: {
            'dataPoint1': {
                fillColor: '#FEE5D9',
                minValue: 0,
                maxValue: 30,
                maxHeight: 30,
            }
        }
        .....
        weight: 1,
        color: '#000000',
    }

    var barChartMarker = L.minichart(bar.location, options);
    barChartGroup.addLayer(barChartMarker);
})

L.control.layers(overlays).addTo(map);

Leaflet JS中条形图的控制层

Control Layer for Barchart in Leaflet JS

javascript

leaflet