主頁 > 軟體工程 > 從svgmap的谷歌表格中獲取資料

從svgmap的谷歌表格中獲取資料

2022-02-21 22:23:55 軟體工程

我很確定我離我的腳本作業只有一行,但我不知道出了什么問題。我正在處理本地 html 頁面,我正在嘗試使用svgMap庫來創建我看過的所有電影的地圖。資料來自我制作的谷歌表格,我通過opensheet庫檢索。到目前為止一切順利,我得到了這個 JSON:

[{"Pays":"USA","Nb_films":"1005"},{"Pays":"France","Nb_films":"278"},{"Pays":"UK","Nb_films":"220"},{"Pays":"Canada","Nb_films":"71"},{"Pays":"Allemagne","Nb_films":"68"},{"Pays":"Belgique","Nb_films":"35"},{"Pays":"Japon","Nb_films":"33"},{"Pays":"Australie","Nb_films":"31"},{"Pays":"Italie","Nb_films":"30"},{"Pays":"Espagne","Nb_films":"23"},{"Pays":"Chine","Nb_films":"18"},{"Pays":"Inde","Nb_films":"16"},{"Pays":"Nouvelle-Zélande","Nb_films":"13"},{"Pays":"Suède","Nb_films":"11"},{"Pays":"Danemark","Nb_films":"10"},{"Pays":"Irlande","Nb_films":"10"},{"Pays":"Mexique","Nb_films":"8"},{"Pays":"Afrique du Sud","Nb_films":"7"},{"Pays":"Pays-Bas","Nb_films":"7"},{"Pays":"Corée du Sud","Nb_films":"6"},{"Pays":"Suisse","Nb_films":"6"},{"Pays":"Tchéquie","Nb_films":"6"},{"Pays":"Norvège","Nb_films":"4"},{"Pays":"Autriche","Nb_films":"3"},{"Pays":"Chili","Nb_films":"3"},{"Pays":"Grèce","Nb_films":"3"},{"Pays":"Hongrie","Nb_films":"3"},{"Pays":"Luxembourg","Nb_films":"3"},{"Pays":"Russie","Nb_films":"3"},{"Pays":"Union soviétique","Nb_films":"3"},{"Pays":"Hong Kong","Nb_films":"2"},{"Pays":"Pologne","Nb_films":"2"},{"Pays":"Portugal","Nb_films":"2"},{"Pays":"Sénégal","Nb_films":"2"},{"Pays":"Tha?lande","Nb_films":"2"},{"Pays":"émirats Arabes Unis","Nb_films":"2"},{"Pays":"Argentine","Nb_films":"1"},{"Pays":"Arménie","Nb_films":"1"},{"Pays":"Brésil","Nb_films":"1"},{"Pays":"Indonésie","Nb_films":"1"},{"Pays":"Iran","Nb_films":"1"},{"Pays":"Islande","Nb_films":"1"},{"Pays":"Isra?l","Nb_films":"1"},{"Pays":"Kenya","Nb_films":"1"},{"Pays":"Lettonie","Nb_films":"1"},{"Pays":"Martinique","Nb_films":"1"},{"Pays":"Philippines","Nb_films":"1"},{"Pays":"Roumanie","Nb_films":"1"},{"Pays":"Singapour","Nb_films":"1"}]

現在我必須將兩者聯系在一起,但這就是我完全卡住的地方!到目前為止,這是我的代碼:

<!DOCTYPE HTML>
<html>
    
    <head>
        <title>Films map</title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg-pan-zoom.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.js"></script>
        <link href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.css" rel="stylesheet">
    </head>
    
    <body>
    
        <div id="cartedesfilms"></div>

        <script>
        var countryCodes = {
            AF: 'Afghanistan',
            AX: '?les ?land',
            AL: 'Albanie',
            DZ: 'Algérie',
            AS: 'Samoa américaines',
            AD: 'Andorre',
            AO: 'Angola',
            AI: 'Anguilla',
            AQ: 'Antarctique',
            AG: 'Antigua-et-Barbuda',
            AR: 'Argentine',
            AM: 'Arménie',
            AW: 'Aruba',
            AU: 'Australie',
            AT: 'Autriche',
            AZ: 'Azerba?djan',
            BS: 'Bahamas',
            BH: 'Bahre?n',
            BD: 'Bangladesh',
            BB: 'Barbade',
            BY: 'Biélorussie',
            BE: 'Belgique',
            BZ: 'Belize',
            BJ: 'Bénin',
            BM: 'Bermudes',
            BT: 'Bhoutan',
            BO: 'Bolivie',
            BA: 'Bosnie-Herzégovine',
            BW: 'Botswana',
            BR: 'Brésil',
            IO: 'Territoire britannique de l’océan Indien',
            VG: '?les Vierges britanniques',
            BN: 'Brunéi Darussalam',
            BG: 'Bulgarie',
            BF: 'Burkina Faso',
            BI: 'Burundi',
            KH: 'Cambodge',
            CM: 'Cameroun',
            CA: 'Canada',
            CV: 'Cap-Vert',
            BQ: 'Pays-Bas caribéens',
            KY: '?les Ca?mans',
            CF: 'République centrafricaine',
            TD: 'Tchad',
            CL: 'Chili',
            CN: 'Chine',
            CX: '?le Christmas',
            CC: '?les Cocos',
            CO: 'Colombie',
            KM: 'Comores',
            CG: 'Congo-Brazzaville',
            CK: '?les Cook',
            CR: 'Costa Rica',
            HR: 'Croatie',
            CU: 'Cuba',
            CW: 'Cura?ao',
            CY: 'Chypre',
            CZ: 'Tchéquie',
            CD: 'Congo-Kinshasa',
            DK: 'Danemark',
            DJ: 'Djibouti',
            DM: 'Dominique',
            DO: 'République dominicaine',
            EC: 'équateur',
            EG: 'égypte',
            SV: 'El Salvador',
            GQ: 'Guinée équatoriale',
            ER: 'érythrée',
            EE: 'Estonie',
            ET: 'éthiopie',
            FK: '?les Malouines',
            FO: '?les Féroé',
            FM: 'états fédérés de Micronésie',
            FJ: 'Fidji',
            FI: 'Finlande',
            FR: 'France',
            GF: 'Guyane fran?aise',
            PF: 'Polynésie fran?aise',
            TF: 'Terres australes fran?aises',
            GA: 'Gabon',
            GM: 'Gambie',
            GE: 'Géorgie',
            DE: 'Allemagne',
            GH: 'Ghana',
            GI: 'Gibraltar',
            GR: 'Grèce',
            GL: 'Groenland',
            GD: 'Grenade',
            GP: 'Guadeloupe',
            GU: 'Guam',
            GT: 'Guatemala',
            GN: 'Guinée',
            GW: 'Guinée-Bissau',
            GY: 'Guyana',
            HT: 'Ha?ti',
            HN: 'Honduras',
            HK: 'Hong Kong',
            HU: 'Hongrie',
            IS: 'Islande',
            IN: 'Inde',
            ID: 'Indonésie',
            IR: 'Iran',
            IQ: 'Irak',
            IE: 'Irlande',
            IM: '?le de Man',
            IL: 'Isra?l',
            IT: 'Italie',
            CI: 'C?te d’Ivoire',
            JM: 'Jama?que',
            JP: 'Japon',
            JE: 'Jersey',
            JO: 'Jordanie',  
            KZ: 'Kazakhstan',
            KE: 'Kenya',
            KI: 'Kiribati',
            XK: 'Kosovo',
            KW: 'Kowe?t',
            KG: 'Kirghizistan',
            LA: 'Laos',
            LV: 'Lettonie',
            LB: 'Liban',
            LS: 'Lesotho',
            LR: 'Libéria',
            LY: 'Libye',
            LI: 'Liechtenstein',
            LT: 'Lituanie',
            LU: 'Luxembourg',
            MO: 'R.A.S. chinoise de Macao',
            MK: 'Macédoine',
            MG: 'Madagascar',
            MW: 'Malawi',
            MY: 'Malaisie',
            MV: 'Maldives',
            ML: 'Mali',
            MT: 'Malte',
            MH: '?les Marshall',
            MQ: 'Martinique',
            MR: 'Mauritanie',
            MU: 'Maurice',
            YT: 'Mayotte',
            MX: 'Mexique',
            MD: 'Moldavie',
            MC: 'Monaco',
            MN: 'Mongolie',
            ME: 'Monténégro',
            MS: 'Montserrat',
            MA: 'Maroc',
            MZ: 'Mozambique',
            MM: 'Myanmar (Birmanie)',
            NA: 'Namibie',
            NR: 'Nauru',
            NP: 'Népal',
            NL: 'Pays-Bas',
            NC: 'Nouvelle-Calédonie',
            NZ: 'Nouvelle-Zélande',
            NI: 'Nicaragua',
            NE: 'Niger',
            NG: 'Nigéria',
            NU: 'Niue',
            NF: '?le Norfolk',
            KP: 'Corée du Nord',
            MP: '?les Mariannes du Nord',
            NO: 'Norvège',
            OM: 'Oman',
            PK: 'Pakistan',
            PW: 'Palaos',
            PS: 'Territoires palestiniens',
            PA: 'Panama',
            PG: 'Papouasie-Nouvelle-Guinée',
            PY: 'Paraguay',
            PE: 'Pérou',
            PH: 'Philippines',
            PN: '?les Pitcairn',
            PL: 'Pologne',
            PT: 'Portugal',
            PR: 'Porto Rico',
            QA: 'Qatar',
            RE: 'La Réunion',
            RO: 'Roumanie',
            RU: 'Russie',
            RW: 'Rwanda',
            SH: 'Sainte-Hélène',
            KN: 'Saint-Christophe-et-Niévès',
            LC: 'Sainte-Lucie',
            PM: 'Saint-Pierre-et-Miquelon',
            VC: 'Saint-Vincent-et-les-Grenadines',
            WS: 'Samoa',
            SM: 'Saint-Marin',
            ST: 'Sao Tomé-et-Principe',
            SA: 'Arabie saoudite',
            SN: 'Sénégal',
            RS: 'Serbie',
            SC: 'Seychelles',
            SL: 'Sierra Leone',
            SG: 'Singapour',
            SX: 'Saint-Martin (partie néerlandaise)',
            SK: 'Slovaquie',
            SI: 'Slovénie',
            SB: '?les Salomon',
            SO: 'Somalie',
            ZA: 'Afrique du Sud',
            GS: 'Géorgie du Sud et ?les Sandwich du Sud',
            KR: 'Corée du Sud',
            SS: 'Soudan du Sud',
            ES: 'Espagne',
            LK: 'Sri Lanka',
            SD: 'Soudan',
            SR: 'Suriname',
            SJ: 'Svalbard et Jan Mayen',
            SZ: 'Swaziland',
            SE: 'Suède',
            CH: 'Suisse',
            SY: 'Syrie',
            TW: 'Ta?wan',
            TJ: 'Tadjikistan',
            TZ: 'Tanzanie',
            TH: 'Tha?lande',
            TL: 'Timor oriental',
            TG: 'Togo',
            TK: 'Tokélaou',
            TO: 'Tonga',
            TT: 'Trinité-et-Tobago',
            TN: 'Tunisie',
            TR: 'Turquie',
            TM: 'Turkménistan',
            TC: '?les Turques-et-Ca?ques',
            TV: 'Tuvalu',
            UG: 'Ouganda',
            UA: 'Ukraine',
            AE: 'émirats Arabes Unis',
            GB: 'UK',
            US: 'USA',
            UM: '?les mineures éloignées des états-Unis',
            VI: '?les Vierges des états-Unis',
            UY: 'Uruguay',
            UZ: 'Ouzbékistan',
            VU: 'Vanuatu',
            VA: 'Vatican',
            VE: 'Venezuela',
            VN: 'Vietnam',
            WF: 'Wallis-et-Futuna',
            EH: 'Sahara occidental',
            YE: 'Yémen',
            ZM: 'Zambie',
            ZW: 'Zimbabwe'
        }
        var inverseCountryCodes = {};
        for(i in countryCodes){
            inverseCountryCodes[countryCodes[i]] = i;
        };
        
        function fairelaliste(){
            var listedespays = [];
        
            fetch("https://opensheet.elk.sh/1jQn8yFvEqP1anLttNUCtlLbaeByEJD6TVSaJLrkYLb4/CARTE").then((res) => res.json()).then((data) => {
                data.forEach((row) => {
                    var codepays = "";
                    var filmspays = 0;
                    var donneespays= {};
                
                    codepays = inverseCountryCodes[row.Pays];
                    filmspays = row.Nb_films;
                    donneespays = {[codepays]: {nbfilms: filmspays}};
                    
                    listedespays.push(donneespays);
                });
                return listedespays;
            });
        };
        
        new svgMap({
            targetElementID: 'cartedesfilms',
            initialZoom:'1',
            maxZoom:'25',
            mouseWheelZoomEnabled:'true',
            colorMax: '#a64d79',
            colorMin: '#f9cb9c',
            colorNoData: '#efefef',
            flagType:'emoji',
            noDataText:'pas de films',
            countryNames: countryCodes,
            data: {
                data: {
                    nbfilms: {
                        name: 'nombre de films vus',
                        format: '{0}',
                        thousandSeparator: ' ',
                        thresholdMax: 100,
                        thresholdMin: 1
                        }
                },
                applyData: 'nbfilms',
                values: fairelaliste()
            }
        });

        </script>
        
    </body>
    
</html>

如您所見,首先代碼使用 countryCodes 物件將 ISO 代碼與國家/地區名稱相關聯,反之亦然,然后我構建了一個函式來獲取 json 并將正確的格式注入到 svgMap JSON 中的“values”屬性中。但我無法讓 faireliste() 函式正常作業。

svgMap 的“值”屬性的正確格式應該是:

values{
    US:{
        nbfilms: 1005
    },
    FR:{
        nbfilms: 278
    }
//etc
}

所以我的函式應該從國家名稱(codepays 變數)中獲取 iso 代碼,然后是電影的數量(filmspays 變數),并將這兩者注入一個新陣列,然后對于該陣列中的每個元素,我使用 ISO 代碼選擇與所需國家相對應的 JSON 引數,然后我將 nbfilms 編號注入它應該在的位置......但我不確定我是否可以這樣做,lmao?地圖變黑了,所以發生了一些事情,但控制臺告訴我讀取 ISO 代碼變數時出現錯誤?

前任:

未捕獲的型別錯誤:無法在 l.getTooltipContent (svgMap.min.js:2:12743) 處讀取未定義的屬性(讀取“US”)。(svgMap.min.js:2:10746)當我將滑鼠懸停在地圖上時,每個國家/地區都會重復相同的錯誤。

感謝您的幫助:(

編輯:我編輯了 fairelaliste 函式,因為我意識到我發布了錯誤的版本,對不起!

uj5u.com熱心網友回復:

所有國家都需要直接添加到您的值物件中。
您的 values var 實際上是一個物件陣列。您應該像這樣添加所有國家/地區專案。

var codepays = "";
var filmspays = 0;
var donneespays= {};
codepays = inverseCountryCodes[row.Pays];
filmspays = row.Nb_films;
if(codepays){
  listedespays[codepays]={nbfilms: filmspays};
}

此外,您正在立即初始化新地圖,而listedespays資料尚未檢索(通過 fetch() 請求)。

只需new svgMap({...})在您的fairelaliste()通話中包含您的地圖初始化。

作業示例

顯示代碼片段

var countryCodes = {
  AF: 'Afghanistan',
  AX: '?les ?land',
  AL: 'Albanie',
  DZ: 'Algérie',
  AS: 'Samoa américaines',
  AD: 'Andorre',
  AO: 'Angola',
  AI: 'Anguilla',
  AQ: 'Antarctique',
  AG: 'Antigua-et-Barbuda',
  AR: 'Argentine',
  AM: 'Arménie',
  AW: 'Aruba',
  AU: 'Australie',
  AT: 'Autriche',
  AZ: 'Azerba?djan',
  BS: 'Bahamas',
  BH: 'Bahre?n',
  BD: 'Bangladesh',
  BB: 'Barbade',
  BY: 'Biélorussie',
  BE: 'Belgique',
  BZ: 'Belize',
  BJ: 'Bénin',
  BM: 'Bermudes',
  BT: 'Bhoutan',
  BO: 'Bolivie',
  BA: 'Bosnie-Herzégovine',
  BW: 'Botswana',
  BR: 'Brésil',
  IO: 'Territoire britannique de l’océan Indien',
  VG: '?les Vierges britanniques',
  BN: 'Brunéi Darussalam',
  BG: 'Bulgarie',
  BF: 'Burkina Faso',
  BI: 'Burundi',
  KH: 'Cambodge',
  CM: 'Cameroun',
  CA: 'Canada',
  CV: 'Cap-Vert',
  BQ: 'Pays-Bas caribéens',
  KY: '?les Ca?mans',
  CF: 'République centrafricaine',
  TD: 'Tchad',
  CL: 'Chili',
  CN: 'Chine',
  CX: '?le Christmas',
  CC: '?les Cocos',
  CO: 'Colombie',
  KM: 'Comores',
  CG: 'Congo-Brazzaville',
  CK: '?les Cook',
  CR: 'Costa Rica',
  HR: 'Croatie',
  CU: 'Cuba',
  CW: 'Cura?ao',
  CY: 'Chypre',
  CZ: 'Tchéquie',
  CD: 'Congo-Kinshasa',
  DK: 'Danemark',
  DJ: 'Djibouti',
  DM: 'Dominique',
  DO: 'République dominicaine',
  EC: 'équateur',
  EG: 'égypte',
  SV: 'El Salvador',
  GQ: 'Guinée équatoriale',
  ER: 'érythrée',
  EE: 'Estonie',
  ET: 'éthiopie',
  FK: '?les Malouines',
  FO: '?les Féroé',
  FM: 'états fédérés de Micronésie',
  FJ: 'Fidji',
  FI: 'Finlande',
  FR: 'France',
  GF: 'Guyane fran?aise',
  PF: 'Polynésie fran?aise',
  TF: 'Terres australes fran?aises',
  GA: 'Gabon',
  GM: 'Gambie',
  GE: 'Géorgie',
  DE: 'Allemagne',
  GH: 'Ghana',
  GI: 'Gibraltar',
  GR: 'Grèce',
  GL: 'Groenland',
  GD: 'Grenade',
  GP: 'Guadeloupe',
  GU: 'Guam',
  GT: 'Guatemala',
  GN: 'Guinée',
  GW: 'Guinée-Bissau',
  GY: 'Guyana',
  HT: 'Ha?ti',
  HN: 'Honduras',
  HK: 'Hong Kong',
  HU: 'Hongrie',
  IS: 'Islande',
  IN: 'Inde',
  ID: 'Indonésie',
  IR: 'Iran',
  IQ: 'Irak',
  IE: 'Irlande',
  IM: '?le de Man',
  IL: 'Isra?l',
  IT: 'Italie',
  CI: 'C?te d’Ivoire',
  JM: 'Jama?que',
  JP: 'Japon',
  JE: 'Jersey',
  JO: 'Jordanie',
  KZ: 'Kazakhstan',
  KE: 'Kenya',
  KI: 'Kiribati',
  XK: 'Kosovo',
  KW: 'Kowe?t',
  KG: 'Kirghizistan',
  LA: 'Laos',
  LV: 'Lettonie',
  LB: 'Liban',
  LS: 'Lesotho',
  LR: 'Libéria',
  LY: 'Libye',
  LI: 'Liechtenstein',
  LT: 'Lituanie',
  LU: 'Luxembourg',
  MO: 'R.A.S. chinoise de Macao',
  MK: 'Macédoine',
  MG: 'Madagascar',
  MW: 'Malawi',
  MY: 'Malaisie',
  MV: 'Maldives',
  ML: 'Mali',
  MT: 'Malte',
  MH: '?les Marshall',
  MQ: 'Martinique',
  MR: 'Mauritanie',
  MU: 'Maurice',
  YT: 'Mayotte',
  MX: 'Mexique',
  MD: 'Moldavie',
  MC: 'Monaco',
  MN: 'Mongolie',
  ME: 'Monténégro',
  MS: 'Montserrat',
  MA: 'Maroc',
  MZ: 'Mozambique',
  MM: 'Myanmar (Birmanie)',
  NA: 'Namibie',
  NR: 'Nauru',
  NP: 'Népal',
  NL: 'Pays-Bas',
  NC: 'Nouvelle-Calédonie',
  NZ: 'Nouvelle-Zélande',
  NI: 'Nicaragua',
  NE: 'Niger',
  NG: 'Nigéria',
  NU: 'Niue',
  NF: '?le Norfolk',
  KP: 'Corée du Nord',
  MP: '?les Mariannes du Nord',
  NO: 'Norvège',
  OM: 'Oman',
  PK: 'Pakistan',
  PW: 'Palaos',
  PS: 'Territoires palestiniens',
  PA: 'Panama',
  PG: 'Papouasie-Nouvelle-Guinée',
  PY: 'Paraguay',
  PE: 'Pérou',
  PH: 'Philippines',
  PN: '?les Pitcairn',
  PL: 'Pologne',
  PT: 'Portugal',
  PR: 'Porto Rico',
  QA: 'Qatar',
  RE: 'La Réunion',
  RO: 'Roumanie',
  RU: 'Russie',
  RW: 'Rwanda',
  SH: 'Sainte-Hélène',
  KN: 'Saint-Christophe-et-Niévès',
  LC: 'Sainte-Lucie',
  PM: 'Saint-Pierre-et-Miquelon',
  VC: 'Saint-Vincent-et-les-Grenadines',
  WS: 'Samoa',
  SM: 'Saint-Marin',
  ST: 'Sao Tomé-et-Principe',
  SA: 'Arabie saoudite',
  SN: 'Sénégal',
  RS: 'Serbie',
  SC: 'Seychelles',
  SL: 'Sierra Leone',
  SG: 'Singapour',
  SX: 'Saint-Martin (partie néerlandaise)',
  SK: 'Slovaquie',
  SI: 'Slovénie',
  SB: '?les Salomon',
  SO: 'Somalie',
  ZA: 'Afrique du Sud',
  GS: 'Géorgie du Sud et ?les Sandwich du Sud',
  KR: 'Corée du Sud',
  SS: 'Soudan du Sud',
  ES: 'Espagne',
  LK: 'Sri Lanka',
  SD: 'Soudan',
  SR: 'Suriname',
  SJ: 'Svalbard et Jan Mayen',
  SZ: 'Swaziland',
  SE: 'Suède',
  CH: 'Suisse',
  SY: 'Syrie',
  TW: 'Ta?wan',
  TJ: 'Tadjikistan',
  TZ: 'Tanzanie',
  TH: 'Tha?lande',
  TL: 'Timor oriental',
  TG: 'Togo',
  TK: 'Tokélaou',
  TO: 'Tonga',
  TT: 'Trinité-et-Tobago',
  TN: 'Tunisie',
  TR: 'Turquie',
  TM: 'Turkménistan',
  TC: '?les Turques-et-Ca?ques',
  TV: 'Tuvalu',
  UG: 'Ouganda',
  UA: 'Ukraine',
  AE: 'émirats Arabes Unis',
  GB: 'UK',
  US: 'USA',
  UM: '?les mineures éloignées des états-Unis',
  VI: '?les Vierges des états-Unis',
  UY: 'Uruguay',
  UZ: 'Ouzbékistan',
  VU: 'Vanuatu',
  VA: 'Vatican',
  VE: 'Venezuela',
  VN: 'Vietnam',
  WF: 'Wallis-et-Futuna',
  EH: 'Sahara occidental',
  YE: 'Yémen',
  ZM: 'Zambie',
  ZW: 'Zimbabwe'
}
var inverseCountryCodes = {};
for (i in countryCodes) {
  inverseCountryCodes[countryCodes[i]] = i;
};


fairelaliste();

function fairelaliste() {
  //var listedespays = [];
  var listedespays = {};

  fetch("https://opensheet.elk.sh/1jQn8yFvEqP1anLttNUCtlLbaeByEJD6TVSaJLrkYLb4/CARTE").then((res) => res.json()).then((data) => {
    data.forEach((row) => {
      var codepays = "";
      var filmspays = 0;
      var donneespays = {};
      codepays = inverseCountryCodes[row.Pays];
      filmspays = row.Nb_films;
      if (codepays) {
        listedespays[codepays] = {
          nbfilms: filmspays
        };
      }
    });

    // listedespays is complete – now you can initialize the map
    new svgMap({
      targetElementID: 'cartedesfilms',
      initialZoom: '1',
      maxZoom: '25',
      mouseWheelZoomEnabled: 'true',
      colorMax: '#a64d79',
      colorMin: '#f9cb9c',
      colorNoData: '#efefef',
      flagType: 'emoji',
      noDataText: 'pas de films',
      countryNames: countryCodes,
      data: {
        data: {
          nbfilms: {
            name: 'nombre de films vus',
            format: '{0}',
            thousandSeparator: ' ',
            thresholdMax: 100,
            thresholdMin: 1
          }
        },
        applyData: 'nbfilms',
        values: listedespays
      }
    });

  });
};
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg-pan-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.css" rel="stylesheet">


<div id="cartedesfilms"></div>

轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/429795.html

標籤:javascript jQuery json 谷歌表格

上一篇:使用PHP以編程方式創建多個JSON物件元素

下一篇:JOLT轉換資料創建嵌套對

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • Git本地庫既關聯GitHub又關聯Gitee

    創建代碼倉庫 使用gitee舉例(github和gitee差不多) 1.在gitee右上角點擊+,選擇新建倉庫 ? 2.選擇填寫倉庫資訊,然后進行創建 ? 3.服務端已經準備好了,本地開始作準備 (1)Git 全域設定 git config --global user.name "成鈺" git c ......

    uj5u.com 2020-09-10 05:04:14 more
  • CODING DevOps 代碼質量實戰系列第二課,相約周三

    隨著 ToB(企業服務)的興起和 ToC(消費互聯網)產品進入成熟期,線上故障帶來的損失越來越大,代碼質量越來越重要,而「質量內建」正是 DevOps 核心理念之一。**《DevOps 代碼質量實戰(PHP 版)》**為 CODING DevOps 代碼質量實戰系列的第二課,同時也是本系列的 PHP ......

    uj5u.com 2020-09-10 05:07:43 more
  • 推薦Scrum書籍

    推薦Scrum書籍 直接上干貨,推薦書籍清單如下(推薦有順序的哦) Scrum指南 Scrum精髓 Scrum敏捷軟體開發 Scrum捷徑 硝煙中的Scrum和XP : 我們如何實施Scrum 敏捷軟體開發:Scrum實戰指南 Scrum要素 大規模Scrum:大規模敏捷組織的設計 用戶故事地圖 用 ......

    uj5u.com 2020-09-10 05:07:45 more
  • CODING DevOps 代碼質量實戰系列最后一課,周四發車

    隨著 ToB(企業服務)的興起和 ToC(消費互聯網)產品進入成熟期,線上故障帶來的損失越來越大,代碼質量越來越重要,而「質量內建」正是 DevOps 核心理念之一。 **《DevOps 代碼質量實戰(Java 版)》**為 CODING DevOps 代碼質量實戰系列的最后一課,同時也是本系列的 ......

    uj5u.com 2020-09-10 05:07:52 more
  • 敏捷軟體工程實踐書籍

    Scrum轉型想要做好,第一步先了解并真正落實Scrum,那么我推薦的Scrum書籍是要看懂并實踐的。第二步是團隊的工程實踐要做扎實。 下面推薦工程實踐書單: 重構:改善既有代碼的設計 決議極限編程 : 擁抱變化 代碼整潔代碼 程式員的職業素養 修改代碼的藝術 撰寫可讀代碼的藝術 測驗驅動開發 : ......

    uj5u.com 2020-09-10 05:07:55 more
  • Jenkins+svn+nginx實作windows環境自動部署vue前端專案

    前面文章介紹了Jenkins+svn+tomcat實作自動化部署,現在終于有空抽時間出來寫下Jenkins+svn+nginx實作自動部署vue前端專案。 jenkins的安裝和配置已經在前面文章進行介紹,下面介紹實作vue前端專案需要進行的哪些額外的步驟。 注意:在安裝jenkins和nginx的 ......

    uj5u.com 2020-09-10 05:08:49 more
  • CODING DevOps 微服務專案實戰系列第一課,明天等你

    CODING DevOps 微服務專案實戰系列第一課**《DevOps 微服務專案實戰:DevOps 初體驗》**將由 CODING DevOps 開發工程師 王寬老師 向大家介紹 DevOps 的基本理念,并探討為什么現代開發活動需要 DevOps,同時將以 eShopOnContainers 項 ......

    uj5u.com 2020-09-10 05:09:14 more
  • CODING DevOps 微服務專案實戰系列第二課來啦!

    近年來,工程專案的結構越來越復雜,需要接入合適的持續集成流水線形式,才能滿足更多變的需求,那么如何優雅地使用 CI 能力提升生產效率呢?CODING DevOps 微服務專案實戰系列第二課 《DevOps 微服務專案實戰:CI 進階用法》 將由 CODING DevOps 全堆疊工程師 何晨哲老師 向 ......

    uj5u.com 2020-09-10 05:09:33 more
  • CODING DevOps 微服務專案實戰系列最后一課,周四開講!

    隨著軟體工程越來越復雜化,如何在 Kubernetes 集群進行灰度發布成為了生產部署的”必修課“,而如何實作安全可控、自動化的灰度發布也成為了持續部署重點關注的問題。CODING DevOps 微服務專案實戰系列最后一課:**《DevOps 微服務專案實戰:基于 Nginx-ingress 的自動 ......

    uj5u.com 2020-09-10 05:10:00 more
  • CODING 儀表盤功能正式推出,實作作業資料可視化!

    CODING 儀表盤功能現已正式推出!該功能旨在用一張張統計卡片的形式,統計并展示使用 CODING 中所產生的資料。這意味著無需額外的設定,就可以收集歸納寶貴的作業資料并予之量化分析。這些海量的資料皆會以圖表或串列的方式躍然紙上,方便團隊成員隨時查看各專案的進度、狀態和指標,云端協作迎來真正意義上 ......

    uj5u.com 2020-09-10 05:11:01 more
最新发布
  • windows系統git使用ssh方式和gitee/github進行同步

    使用git來clone專案有兩種方式:HTTPS和SSH:
    HTTPS:不管是誰,拿到url隨便clone,但是在push的時候需要驗證用戶名和密碼;
    SSH:clone的專案你必須是擁有者或者管理員,而且需要在clone前添加SSH Key。SSH 在push的時候,是不需要輸入用戶名的,如果配置... ......

    uj5u.com 2023-04-19 08:41:12 more
  • windows系統git使用ssh方式和gitee/github進行同步

    使用git來clone專案有兩種方式:HTTPS和SSH:
    HTTPS:不管是誰,拿到url隨便clone,但是在push的時候需要驗證用戶名和密碼;
    SSH:clone的專案你必須是擁有者或者管理員,而且需要在clone前添加SSH Key。SSH 在push的時候,是不需要輸入用戶名的,如果配置... ......

    uj5u.com 2023-04-19 08:35:34 more
  • 2023年農牧行業6大CRM系統、5大場景盤點

    在物聯網、大資料、云計算、人工智能、自動化技術等現代資訊技術蓬勃發展與逐步成熟的背景下,數字化正成為農牧行業供給側結構性變革與高質量發展的核心驅動因素。因此,改造和提升傳統農牧業、開拓創新現代智慧農牧業,加快推進農牧業的現代化、資訊化、數字化建設已成為農牧業發展的重要方向。 當下,企業數字化轉型已經 ......

    uj5u.com 2023-04-18 08:05:44 more
  • 2023年農牧行業6大CRM系統、5大場景盤點

    在物聯網、大資料、云計算、人工智能、自動化技術等現代資訊技術蓬勃發展與逐步成熟的背景下,數字化正成為農牧行業供給側結構性變革與高質量發展的核心驅動因素。因此,改造和提升傳統農牧業、開拓創新現代智慧農牧業,加快推進農牧業的現代化、資訊化、數字化建設已成為農牧業發展的重要方向。 當下,企業數字化轉型已經 ......

    uj5u.com 2023-04-18 08:00:18 more
  • 計算機組成原理—存盤器

    計算機組成原理—硬體結構 二、存盤器 1.概述 存盤器是計算機系統中的記憶設備,用來存放程式和資料 1.1存盤器的層次結構 快取-主存層次主要解決CPU和主存速度不匹配的問題,速度接近快取 主存-輔存層次主要解決存盤系統的容量問題,容量接近與價位接近于主存 2.主存盤器 2.1概述 主存與CPU的聯 ......

    uj5u.com 2023-04-17 08:20:31 more
  • 談一談我對協同開發的一些認識

    如今各互聯網公司普通都使用敏捷開發,采用小步快跑的形式來進行專案開發。如果是小專案或者小需求,那一個開發可能就搞定了。但對于電商等復雜的系統,其功能多,結構復雜,一個人肯定是搞不定的,所以都是很多人來共同開發維護。以我曾經待過的商城團隊為例,光是后端開發就有七十多人。 為了更好地開發這類大型系統,往 ......

    uj5u.com 2023-04-17 08:18:55 more
  • 專案管理PRINCE2核心知識點整理

    PRINCE2,即 PRoject IN Controlled Environment(受控環境中的專案)是一種結構化的專案管理方法論,由英國政府內閣商務部(OGC)推出,是英國專案管理標準。
    PRINCE2 作為一種開放的方法論,是一套結構化的專案管理流程,描述了如何以一種邏輯性的、有組織的方法,... ......

    uj5u.com 2023-04-17 08:18:51 more
  • 談一談我對協同開發的一些認識

    如今各互聯網公司普通都使用敏捷開發,采用小步快跑的形式來進行專案開發。如果是小專案或者小需求,那一個開發可能就搞定了。但對于電商等復雜的系統,其功能多,結構復雜,一個人肯定是搞不定的,所以都是很多人來共同開發維護。以我曾經待過的商城團隊為例,光是后端開發就有七十多人。 為了更好地開發這類大型系統,往 ......

    uj5u.com 2023-04-17 08:18:00 more
  • 專案管理PRINCE2核心知識點整理

    PRINCE2,即 PRoject IN Controlled Environment(受控環境中的專案)是一種結構化的專案管理方法論,由英國政府內閣商務部(OGC)推出,是英國專案管理標準。
    PRINCE2 作為一種開放的方法論,是一套結構化的專案管理流程,描述了如何以一種邏輯性的、有組織的方法,... ......

    uj5u.com 2023-04-17 08:17:55 more
  • 計算機組成原理—存盤器

    計算機組成原理—硬體結構 二、存盤器 1.概述 存盤器是計算機系統中的記憶設備,用來存放程式和資料 1.1存盤器的層次結構 快取-主存層次主要解決CPU和主存速度不匹配的問題,速度接近快取 主存-輔存層次主要解決存盤系統的容量問題,容量接近與價位接近于主存 2.主存盤器 2.1概述 主存與CPU的聯 ......

    uj5u.com 2023-04-17 08:12:06 more