Итак, я создал несколько круговых диаграмм, используя некоторый код из GitHub в мою карту листовки. Мне удалось использовать Jquery, чтобы диаграммы появлялись и исчезали, когда флажок с id = «data» установлен и снят. Моя единственная проблема заключается в том, что когда я загружаю код в VScode с помощью «Открыть с помощью живого сервера», диаграммы уже загружаются на самой странице без галочки. Я не могу понять, почему диаграммы автоматически загружаются туда, когда страница загружается впервые. Если вы знаете решение этой проблемы, дайте мне знать.

// HTML code
{amp}lt;!DOCTYPE html{amp}gt;
{amp}lt;html lang="en"{amp}gt;
    {amp}lt;head{amp}gt;
        {amp}lt;title{amp}gt;Map Testing{amp}lt;/title{amp}gt;
        {amp}lt;meta charset="UTF-8"{amp}gt;
        {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1.0"{amp}gt;
        {amp}lt;meta http-equiv="X-UA-Compatible" content="ie=edge"{amp}gt;
        {amp}lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46 CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""/{amp}gt;
        {amp}lt;!-- Make sure you put this AFTER Leaflet's CSS --{amp}gt;
        {amp}lt;script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6 rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""{amp}gt;{amp}lt;/script{amp}gt;
        {amp}lt;!-- Cdn for jquery --{amp}gt;
        {amp}lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt;
        {amp}lt;!-- Event handling of checking of checkboxes --{amp}gt;
        {amp}lt;script{amp}gt;
            $(document).ready(function(){
                $('input[id="data"]').click(function(){
                    if($(this).prop("checked") == true){
                        $(".leaflet-piechart-icon").show(500);
                    }
                    else if($(this).prop("checked") == false){
                        $(".leaflet-piechart-icon").hide(500);
                    }
                });
                $('input[id="imports"]').click(function(){
                    if($(this).prop("checked") == true){
                        //$("").show(500);
                    }
                    else if($(this).prop("checked") == false){
                        //$("").hide(500);
                    }
                });
                $('input[id="exports"]').click(function(){
                    if($(this).prop("checked") == true){
                        //$("").show(500);
                    }
                    else if($(this).prop("checked") == false){
                        //$("").hide(500);
                    }
                });
                $('input[id="markers"]').click(function(){
                    if($(this).prop("checked") == true){
                        //$("").show(500);
                    }
                    else if($(this).prop("checked") == false){
                        //$("").hide(500);
                    }
                });
            });
        {amp}lt;/script{amp}gt;
        {amp}lt;!-- Access style.css file in the same folder --{amp}gt;
        {amp}lt;link rel="stylesheet" href="style.css"{amp}gt;
    {amp}lt;/head{amp}gt;
    {amp}lt;body{amp}gt;
        {amp}lt;div class="container"{amp}gt;
            {amp}lt;nav class="navbar"{amp}gt;
                {amp}lt;div class="hamburger-menu"{amp}gt;
                    {amp}lt;div class="line line-1"{amp}gt;{amp}lt;/div{amp}gt;
                    {amp}lt;div class="line line-2"{amp}gt;{amp}lt;/div{amp}gt;
                    {amp}lt;div class="line line-3"{amp}gt;{amp}lt;/div{amp}gt;
                {amp}lt;/div{amp}gt;
                {amp}lt;ul class="nav-list"{amp}gt;
                    {amp}lt;li class="nav-item"{amp}gt;
                        {amp}lt;a href="#" class="navlink"{amp}gt;
                            {amp}lt;label{amp}gt;
                                {amp}lt;input type="checkbox" id="data"{amp}gt; Data {amp}lt;!-- put onclick="toggleLegend();" in the tag to toggle the legend--{amp}gt;
                            {amp}lt;/label{amp}gt;
                        {amp}lt;/a{amp}gt;
                    {amp}lt;/li{amp}gt;
                    {amp}lt;li class="nav-item"{amp}gt;
                        {amp}lt;a href="#" class="navlink"{amp}gt;
                            {amp}lt;label{amp}gt;
                                {amp}lt;input type="checkbox" id="imports"{amp}gt; Imports
                            {amp}lt;/label{amp}gt;
                        {amp}lt;/a{amp}gt;
                    {amp}lt;/li{amp}gt;
                    {amp}lt;li class="nav-item"{amp}gt;
                        {amp}lt;a href="#" class="navlink"{amp}gt;
                            {amp}lt;label{amp}gt;
                                {amp}lt;input type="checkbox" id="exports"{amp}gt; Exports
                            {amp}lt;/label{amp}gt;
                        {amp}lt;/a{amp}gt;
                    {amp}lt;/li{amp}gt;
                    {amp}lt;li class="nav-item"{amp}gt;
                        {amp}lt;a href="#" class="navlink"{amp}gt;
                            {amp}lt;label{amp}gt;
                                {amp}lt;input type="checkbox" id="markers"{amp}gt; Markers
                            {amp}lt;/label{amp}gt;
                        {amp}lt;/a{amp}gt;
                    {amp}lt;/li{amp}gt;
                {amp}lt;/ul{amp}gt;
            {amp}lt;/nav{amp}gt;
        {amp}lt;/div{amp}gt;
        {amp}lt;div id="map"{amp}gt;
        {amp}lt;script src="myscripts.js"{amp}gt;{amp}lt;/script{amp}gt;
        {amp}lt;/div{amp}gt;
        {amp}lt;script src="https://sashakavun.github.io/leaflet-canvasicon/leaflet-canvasicon.js"{amp}gt;{amp}lt;/script{amp}gt;
        {amp}lt;script type="text/javascript" src="leaflet-piechart.js"{amp}gt;{amp}lt;/script{amp}gt;
        {amp}lt;!-- {amp}lt;script type="text/javascript"{amp}gt;{amp}lt;/script{amp}gt; --{amp}gt;
    {amp}lt;/body{amp}gt;
{amp}lt;/html{amp}gt;


// leaflet-piechart.js
/*  Add pie charts for all countries */
L.piechartMarker(
    L.latLng([4.21, 101.97]), // Pie chart for Malaysia
    {
        radius: 40,
        data: [
            { name: 'Tobacco', value: 25, style: { fillStyle: 'rgba(0,0,255,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Whiskey', value: 35, style: { fillStyle: 'rgba(255,0,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Beer', value: 20, style: { fillStyle: 'rgba(0,255,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Cigar', value: 30, style: { fillStyle: 'rgba(255,255,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Others', value: 5, style: { fillStyle: 'rgba(255,228,181,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
        ]
    }
).addTo(mymap);
L.piechartMarker(
    L.latLng([20.594, 78.962]), // Pie chart for India
    {
        radius: 40,
        data: [
            { name: 'Tobacco', value: 50, style: { fillStyle: 'rgba(0,0,255,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Whiskey', value: 36, style: { fillStyle: 'rgba(255,0,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Beer', value: 12, style: { fillStyle: 'rgba(0,255,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Cigar', value: 67, style: { fillStyle: 'rgba(255,255,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Others', value: 23, style: { fillStyle: 'rgba(255,228,181,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
        ]
    }
).addTo(mymap);
L.piechartMarker(
    L.latLng([35.861, 104.195]), // Pie chart for China
    {
        radius: 40,
        data: [
            { name: 'Tobacco', value: 15, style: { fillStyle: 'rgba(0,0,255,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Whiskey', value: 29, style: { fillStyle: 'rgba(255,0,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Beer', value: 78, style: { fillStyle: 'rgba(0,255,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Cigar', value: 43, style: { fillStyle: 'rgba(255,255,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Others', value: 7, style: { fillStyle: 'rgba(255,228,181,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
        ]
    }
).addTo(mymap);
L.piechartMarker(
    L.latLng([23.421, 53.8478]), // Pie chart for UAE
    {
        radius: 40,
        data: [
            { name: 'Tobacco', value: 95, style: { fillStyle: 'rgba(0,0,255,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Whiskey', value: 78, style: { fillStyle: 'rgba(255,0,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Beer', value: 56, style: { fillStyle: 'rgba(0,255,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Cigar', value: 44, style: { fillStyle: 'rgba(255,255,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Others', value: 50, style: { fillStyle: 'rgba(255,228,181,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
        ]
    }
).addTo(mymap);
L.piechartMarker(
    L.latLng([23.6978, 120.9605]), // Pie chart for Taiwan
    {
        radius: 40,
        data: [
            { name: 'Tobacco', value: 21, style: { fillStyle: 'rgba(0,0,255,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Whiskey', value: 10, style: { fillStyle: 'rgba(255,0,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Beer', value: 52, style: { fillStyle: 'rgba(0,255,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Cigar', value: 21, style: { fillStyle: 'rgba(255,255,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Others', value: 87, style: { fillStyle: 'rgba(255,228,181,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
        ]
    }
).addTo(mymap);
L.piechartMarker(
    L.latLng([0.7892, 113.9213]), // Pie chart for Indonesia
    {
        radius: 40,
        data: [
            { name: 'Tobacco', value: 4, style: { fillStyle: 'rgba(0,0,255,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Whiskey', value: 39, style: { fillStyle: 'rgba(255,0,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Beer', value: 53, style: { fillStyle: 'rgba(0,255,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Cigar', value: 85, style: { fillStyle: 'rgba(255,255,0,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
            { name: 'Others', value: 64, style: { fillStyle: 'rgba(255,228,181,1)', strokeStyle: 'rgba(0,0,0,.95)'} },
        ]
    }
).addTo(mymap);