时间戳

首页 > 解决方案 > 如何将多个图表添加到传单地图？

javascript - 如何将多个图表添加到传单地图？

问题描述

我设法在传单地图上创建了一些条形图并对其进行了引用，以便可以根据侧面菜单中的复选框显示或隐藏图表。但是，一次只能显示和隐藏一个条形图，而我需要创建更多条形图并在选中复选框时使它们全部同时出现。有一种方法可以做到这一点，但这意味着我必须手动对条形图进行硬编码，这不是很有效。如果您确实知道不需要硬代码的快捷方式并且仍然创建更多条形图并同时显示/隐藏，请告诉我。

// HTML code
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Map Testing</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""/>
        <!-- Make sure you put this AFTER Leaflet's CSS -->
        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""></script>
        <!-- Cdn for jquery -->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
        <!-- Cdn for Barcharts -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.min.js"
        integrity="sha256-d4jm/DxK0vxzigVql4lmwFikmXIlItcko9Me2md/mwI="
        crossorigin="anonymous"></script>
        <!-- Event handling of checking of checkboxes -->
        <script>
            $(document).ready(function(){
                // Hides the piechart at the beginning
                if($(".leaflet-piechart-icon")){
                    $(".leaflet-piechart-icon").hide();
                }
                // Hides the piechart legend at the beginning
                if($(".legend")){
                    $(".legend").hide();
                }
                // Hides the stringlines at the beginning
                if($(1 == 1)){
                    mymap.removeLayer(polyline);
                }
                // Hides the barchart at the beginning
                if($(1 == 1)){
                    mymap.removeLayer(barChartMarker);
                }
                // Shows or hides layers when checkbox is checked or unchecked
                $('input[id="pie-charts"]').click(function(){
                    if($(this).prop("checked") == true){
                        $(".leaflet-piechart-icon").show(500);
                        $(".legend").show(500);
                    }
                    else if($(this).prop("checked") == false){
                        $(".leaflet-piechart-icon").hide(500);
                        $(".legend").hide(500);
                    }
                });
                $('input[id="bar-charts"]').click(function(){
                    if($(this).prop("checked") == true){
                        mymap.addLayer(barChartMarker);
                    }
                    else if($(this).prop("checked") == false){
                        mymap.removeLayer(barChartMarker);
                    }
                });
                $('input[id="choropleth"]').click(function(){
                    if($(this).prop("checked") == true){
                        //$("").show(500);
                    }
                    else if($(this).prop("checked") == false){
                        //$("").hide(500);
                    }
                });
                $('input[id="string-lines"]').click(function(){
                    if($(this).prop("checked") == true){
                        mymap.addLayer(polyline);
                    }
                    else if($(this).prop("checked") == false){
                        mymap.removeLayer(polyline);
                    }
                });
            });
        </script>
        <!-- Access style.css file in the same folder -->
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <nav class="navbar">
                <div class="hamburger-menu">
                    <div class="line line-1"></div>
                    <div class="line line-2"></div>
                    <div class="line line-3"></div>
                </div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="#" class="navlink">
                            <label>
                                <input type="checkbox" id="pie-charts"> Pie Charts
                            </label>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="navlink">
                            <label>
                                <input type="checkbox" id="bar-charts"> Bar Charts
                            </label>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="navlink">
                            <label>
                                <input type="checkbox" id="choropleth"> Choropleth
                            </label>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="navlink">
                            <label>
                                <input type="checkbox" id="string-lines"> String Lines
                            </label>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div id="map">
        <script src="myscripts.js"></script>
        <script src="leaflet-choropleth.js"></script>
        </div>
        <script src="http://sashakavun.github.io/leaflet-canvasicon/leaflet-canvasicon.js"></script>
        <script type="text/javascript" src="leaflet-piechart.js"></script>
        <script src="leaflet-barchart.js"></script>
    </body>
</html>


// leaflet-barchart.js
var options = {
    data: {'dataPoint1': 22,'dataPoint2': 36,'dataPoint3': 42,'dataPoint4': 20},
    chartOptions: {
        'dataPoint1': {fillColor:'#3f0fd1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
                return value.toFixed(2);
            }
        },
        'dataPoint2': {fillColor:'#6a0fd1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
                return value.toFixed(2);
            }
        },
        'dataPoint3': {fillColor:'#0f6ad1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
                return value.toFixed(2);
            }
        },
        'dataPoint4': {fillColor:'#0f9ad1',minValue:0,maxValue:20,maxHeight:20,displayText:function(value) {
                return value.toFixed(2);
            }
        }
    },
};
var barChartMarker = new L.BarChartMarker(L.latLng(20.894, 78.962), options).addTo(mymap);

标签： javascripthtmlleaflet

解决方案

推荐阅读